내부 그리드가있는 treeviewitem.header

StackOverflow https://stackoverflow.com/questions/668393

  •  21-08-2019
  •  | 
  •  

문제

나는 TreeViewItem.header (TreeView Control의 오른쪽에 가깝게)의 끝에 "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>
도움이 되었습니까?

해결책

이를 달성하려면 TreeView의 itemContainerstyle을 사용하여 TreeViewItem의 제어 템플릿을 변경해야합니다 (TreeView의 루트에있는 모든 항목에 적용되는 스타일).

기본 TreeViewItem이 늘어나지 않으므로 오른쪽으로 끝까지 연장되지 않습니다. 헤더를 설정하면 TreeViewItem 내부에 있으므로 과거를 확장 할 수 없습니다.

너무 길기 때문에 전체 스타일을 게시하지 않을 것입니다.

Blend에서해야 할 일은 다음과 같습니다. TreeViewItem을 선택하고 마우스 오른쪽 버튼을 클릭하고 "제어 부품 편집/사본 편집"을 선택하십시오. 원하는 곳마다 스타일을 저장하십시오.

이제 템플릿에서 물건을 확장하고 테두리 인 "BD"요소를 찾습니다. Rowspan 속성을 "2"로 변경하십시오.

마지막으로, 항목의 "horizontalcontentalIngment"속성을 "스트레치"로 설정하십시오 (여러 노드에 적용 해야하는 경우 항목 또는 스타일을 통해).

항목은 이제 올바른 너비 여야합니다. 이제 이것은 선택한 항목에만 적용됩니다. TreeView에 추가 한 항목에 대해 작동하려면 TreeView의 "ItemContainerstyle"을 새로 만든 스타일로 변경하고 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"은 블렌드가 당신을 위해 만든 스타일입니다.

편집하다

요청에 따라, 블렌드 및 수정으로 생성 된 전체 스타일은 다음과 같습니다. 기본적으로 작은 수정이있는 내장 스타일의 사본이기 때문에 길다. 

<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>

다른 팁

두 샘플은이 게시물을 참조하십시오. 나는 오늘 방금 이것을 만들었습니다.

WPF에서 전체 TreeViewItem 라인을 강조 표시하십시오

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top