2

TreeViewItem.Header の最後に (TreeView コントロールの右側に近いように) 「Img」を表示しようとしていますが、ヘッダー全体を試してみても、常に TreeView のサイズより小さく、もちろん「Img」がどこかに表示されます。コントロールの真ん中。これはおそらく非常に初歩的な質問です。私はWPFを学び始めたばかりです。

<TreeView Grid.Row="1" Grid.ColumnSpan="2" Margin="3,3,3,3" Name="treeView1" Width="300">
    <TreeViewItem HorizontalAlignment="Stretch">
        <TreeViewItem.Header>
            <Grid HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition  />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="30" />
                </Grid.ColumnDefinitions>

                <Label Grid.Column="0" Grid.Row="0">General</Label>
                <Label Grid.Column="1" Grid.Row="0">Img</Label>
            </Grid>
        </TreeViewItem.Header>
    </TreeViewItem>
</TreeView>
4

2 に答える 2

2

これを実現するには、TreeViewのItemContainerStyleを使用してTreeviewItemのコントロールテンプレートを変更する必要があります(これは、ツリービューのルートにある任意のアイテムに適用されるスタイルです)。

デフォルトのTreeViewItemは拡張されていないため、右端まで拡張されません。ヘッダーを設定すると、それはTreeViewItem内にあるため、それを超えて拡張することはできません。

長すぎるので、スタイル全体を投稿しません。

Blendで行う操作は次のとおりです。TreeViewItemを選択し、右クリックして[コントロールパーツの編集/コピーの編集]を選択します。好きな場所にスタイルを保存します。

次に、テンプレートでコンテンツを展開し、境界線である「Bd」要素を見つけます。RowSpanプロパティを「2」に変更します。

最後に、アイテムの「Horizo​​ntalContentAlignment」プロパティを「Stretch」に設定します(アイテム上、または複数のノードに適用する必要がある場合はスタイルを介して)。

これで、アイテムは正しい幅になります。現在、これは選択したアイテムにのみ適用されます。ツリービューに追加するアイテムでこれを機能させるには、ツリービューの「ItemContainerStyle」を新しく作成したスタイルに変更し、BlendがTreeViewItemに配置したスタイルを削除する必要があります。

最後になりましたが、TreeViewItemのItemContainerStyleを同じスタイルに設定して、その子も完全に拡張できるようにする必要があります。

つまり、最後に、最初のアイテムに例と子ノードを追加します。

<Grid x:Name="LayoutRoot">
<TreeView Margin="3,3,3,3" Name="treeView1" Width="300" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
<TreeViewItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
    <TreeViewItem.Header>
        <Grid HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition  />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0" Grid.Row="0">General</Label>
            <Label Grid.Column="1" Grid.Row="0">Img</Label>
        </Grid>
    </TreeViewItem.Header>
    <TreeViewItem>
     <TreeViewItem.Header>
        <Grid HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition  />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>

            <Label Grid.Column="0" Grid.Row="0">General</Label>
            <Label Grid.Column="1" Grid.Row="0">Img</Label>
        </Grid>
    </TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>

「TreeViewItemStyle1」は、Blendが作成したスタイルです。

編集

リクエストに応じて、ブレンドと変更によって生成された完全なスタイルを次に示します。基本的にはビルトインスタイルのコピーであり、若干の変更を加えたものであるため、長いです。

<Style x:Key="TreeViewItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>
        <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Width" Value="16"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Width="16" Height="16" Background="Transparent" Padding="5,5,5,5">
                            <Path Fill="Transparent" Stroke="#FF989898" x:Name="ExpandPath" Data="{StaticResource TreeArrow}">
                                <Path.RenderTransform>
                                    <RotateTransform Angle="135" CenterX="3" CenterY="3"/>
                                </Path.RenderTransform>
                            </Path>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/>
                                <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="RenderTransform" TargetName="ExpandPath">
                                    <Setter.Value>
                                        <RotateTransform Angle="180" CenterX="3" CenterY="3"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
                                <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="TreeViewItemStyle1" 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/>
                            </Grid.RowDefinitions>
                            <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.ColumnSpan="2">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/>
                            </Border>
                            <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="HasItems" Value="false">
                                <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" 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 Property="Background" TargetName="Bd" 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>
于 2009-03-21T00:15:56.763 に答える
2

2 つのサンプルについては、この投稿を参照してください。今日はこれらを作成しました。

WPF で TreeViewItem 行全体を強調表示する

于 2009-03-21T03:01:07.443 に答える