2

バックグラウンド

良い結果が得られずに、今日一日検索しました。私が基本的に達成しようとしているのは、次のツリービューです。

<Grid>
    <TreeView>
        <TreeViewItem>
            <TreeViewItem.Header>
                <StackPanel>
                    <TextBlock Text="Header Content 1"/>
                    <TextBlock Text="Header Content 2"/>
                </StackPanel>
            </TreeViewItem.Header>
            <StackPanel >
                <TextBlock Margin="-19,0,0,0" Text="Expandable Content 1"/>
                <TextBlock Margin="-19,0,0,0" Text="Expandable Content 2"/>
            </StackPanel>
        </TreeViewItem>
        <TreeViewItem>
            <TreeViewItem.Header>
                <StackPanel>
                    <TextBlock Text="Content Footer"/>
                    <TextBlock Text="Content Footer"/>
                </StackPanel>
            </TreeViewItem.Header>
        </TreeViewItem>
    </TreeView>
</Grid>

ツリービューの Itemspresenter は、2 つのコンテンツ パネル (ヘッダーとフッター) の間にコンテンツを表示する必要がありますが、上記のコードでは 2 つのツリービュー アイテムが必要であり、それを 1 つの (選択可能な) ツリービュー アイテムとして使用したいと考えています。

グリッドの 3 行目にテキストブロックを追加しようとしてツリービューのデフォルトの Controltemplate を編集した場合、何らかの理由で、ツリービュー項目が展開されたときにこのテキストブロックを 2 回コピーします。

<Window.Resources>
    <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
    <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Width="15"
                          Height="13"
                          Background="Transparent">
                    <Path x:Name="ExpandPath"
                            HorizontalAlignment="Left" 
                            VerticalAlignment="Center" 
                            Margin="1,1,1,1"
                            Fill="{StaticResource GlyphBrush}"
                            Data="M 4 0 L 8 4 L 4 8 Z"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Data" TargetName="ExpandPath" Value="M 0 4 L 8 4 L 4 8 Z"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="TreeViewItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle  Margin="0,0,0,0"
                                    StrokeThickness="5"
                                    Stroke="Black"
                                    StrokeDashArray="1 2"
                                    Opacity="0"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Padding" Value="1,0,0,0"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="19" Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <ToggleButton x:Name="Expander"
                          Style="{StaticResource ExpandCollapseToggleStyle}"
                          IsChecked="{Binding Path=IsExpanded,
                          RelativeSource={RelativeSource TemplatedParent}}"
                          ClickMode="Press"/>
                        <Border   Name="Bd"
                                  Grid.Column="1"
                                  Background="{TemplateBinding Background}"
                                  BorderBrush="{TemplateBinding BorderBrush}"
                                  BorderThickness="{TemplateBinding BorderThickness}"
                                  Padding="{TemplateBinding Padding}">
                            <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        </Border>
                        <ItemsPresenter x:Name="ItemsHost"
                                          Grid.Row="1"
                                          Grid.Column="1"
                                          Grid.ColumnSpan="2"/>
                        <TextBlock Grid.Row="2" Grid.Column="1" Text="Footer Text"></TextBlock>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="false">
                            <Setter TargetName="ItemsHost"
                                    Property="Visibility"
                                    Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="Expander"
                                    Property="Visibility"
                                    Value="Hidden"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasHeader" Value="false"/>
                                <Condition Property="Width" Value="Auto"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasHeader" Value="false"/>
                                <Condition Property="Height" Value="Auto"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>
                        </MultiTrigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>                            </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <TreeView>
        <TreeViewItem>
            <TreeViewItem.Header>
                <StackPanel>
                    <TextBlock Text="Treeview Item 1"/>
                    <TextBlock Text="Header Content"/>
                </StackPanel>
            </TreeViewItem.Header>
            <StackPanel >
                <TextBlock Margin="-19,0,0,0" Text="Expandable Content 1"/>
                <TextBlock Margin="-19,0,0,0" Text="Expandable Content 2"/>
            </StackPanel>
        </TreeViewItem>
        <TreeViewItem>
            <TreeViewItem.Header>
                <StackPanel>
                    <TextBlock Text="Treeview Item 2"/>
                    <TextBlock Text="Header Content"/>
                </StackPanel>
            </TreeViewItem.Header>
            <StackPanel >
                <TextBlock Margin="-19,0,0,0" Text="Expandable Content 1"/>
                <TextBlock Margin="-19,0,0,0" Text="Expandable Content 2"/>
            </StackPanel>
        </TreeViewItem>
    </TreeView>
</Grid>

上記の例では、Itemspresenter の下部に追加されているため、フッター コンテンツが 2 回表示されています。

質問

これを解決する方法を知っている人はいますか?それとも、同じ結果を達成するための別のアプローチを知っていますか?

4

1 に答える 1

1

ここでの問題は、Contentがそれ自体でTreeViewItem暗黙的にラップされ、TreeViewItem別の「フッター」を取得するため、 ごとに 2 つの「フッター」要素のように見えることですTreeViewItem

スヌープで確認:

TreeViewItem実際に追加する

ここに画像の説明を入力

によって作成された暗黙的ContentなものTreeViewItem

ここに画像の説明を入力

回避策:

TextBlock次のような「フッター」に名前を付けるだけです

<TextBlock x:Name="footer"
            Grid.Row="2"
            Grid.Column="1"
            Text="Footer Text" />

Triggerfor HasItems->Falseを次のように更新します。

<Trigger Property="HasItems"
          Value="false">
  <Setter TargetName="Expander"
          Property="Visibility"
          Value="Hidden" />
  <Setter TargetName="footer"
          Property="Visibility"
          Value="Collapsed" />
</Trigger>

これで、フッター テキストはTreeViewItemに子がある場合にのみ表示されるようになり、期待どおりの外観が得られます

于 2013-06-11T19:46:41.653 に答える