如何在水平树视图中将 Silverlight 中的 treeView 元素居中？

Question

我需要做一个组织结构图创建器，所以我选择了treeView用户控件。

我找到了下一个使项目水平排列的例子： Changing the TreeView ItemsPanel orientation has no effect

我为所有元素设置了样式，现在 children 是水平居中的 :)

Parents除外！如何让 parents 居中？请帮助

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <Style TargetType="sdk:TreeViewItem" x:Key="TreeViewItemStyle">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Grid.Resources>
    <sdk:TreeView ItemContainerStyle="{StaticResource TreeViewItemStyle}">
        <sdk:TreeViewItem Header="Root" ItemContainerStyle="{StaticResource TreeViewItemStyle}">
            <sdk:TreeViewItem Header="Alfa" ItemContainerStyle="{StaticResource TreeViewItemStyle}">
                <sdk:TreeViewItem Header="Alfa child1" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
                <sdk:TreeViewItem Header="Alfa child2" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
                <sdk:TreeViewItem Header="Alfa child3" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
            </sdk:TreeViewItem>
            <sdk:TreeViewItem Header="Beta" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
            <sdk:TreeViewItem Header="Gamma" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
        </sdk:TreeViewItem>
    </sdk:TreeView>
</Grid>

Answer 1

获得全部居中的水平树视图的完整代码是：

 <Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <Style TargetType="sdk:TreeViewItem" x:Key="TreeViewItemStyle">


            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>






            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="sdk:TreeViewItem">
                        <Grid Background="{x:Null}" HorizontalAlignment="Center">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver" />
                                    <VisualState x:Name="Pressed" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Foreground" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="#FF999999" />
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" Duration="0" To=".75" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedInactive">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" Duration="0" To=".2" />
                                            <ColorAnimation Storyboard.TargetName="SelectionFill" Storyboard.TargetProperty="Color" Duration="0" To="#FF999999" />
                                            <ColorAnimation Storyboard.TargetName="SelectionStroke" Storyboard.TargetProperty="Color" Duration="0" To="#FF333333" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="HasItemsStates">
                                    <VisualState x:Name="HasItems" />
                                    <VisualState x:Name="NoItems">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Visibility" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ExpansionStates">
                                    <VisualState x:Name="Collapsed" />
                                    <VisualState x:Name="Expanded">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="Valid" />
                                    <VisualState x:Name="InvalidUnfocused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="InvalidFocused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value  >
                                                        <system:Boolean>True</system:Boolean>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="15" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <ToggleButton x:Name="ExpanderButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" TabNavigation="Once" IsChecked="true" Visibility="Collapsed">
                                <ToggleButton.Template>
                                    <ControlTemplate TargetType="ToggleButton">
                                        <Grid x:Name="Root" Background="Transparent" HorizontalAlignment="Left">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal" />
                                                    <VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="(Path.Stroke).Color" To="#FF1BBBFA" Duration="0" />
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To=".7" Duration="0" />
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="CheckStates">
                                                    <VisualState x:Name="Unchecked" />
                                                    <VisualState x:Name="Checked">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                                            <DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Grid HorizontalAlignment="Right" Margin="2 2 5 2">
                                                <Path x:Name="UncheckedVisual" Width="6" Height="9" Fill="#FFFFFFFF" VerticalAlignment="Center" HorizontalAlignment="Right" Data="M 0,0 L 0,9 L 5,4.5 Z" StrokeThickness="1" StrokeLineJoin="Miter">
                                                    <Path.Stroke>
                                                        <SolidColorBrush Color="#FF989898" />
                                                    </Path.Stroke>
                                                </Path>
                                                <Path x:Name="CheckedVisual" Opacity="0" Width="6" Height="6" Fill="#FF262626" VerticalAlignment="Center" HorizontalAlignment="Center" Data="M 6,0 L 6,6 L 0,6 Z" StrokeLineJoin="Miter" />
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                </ToggleButton.Template>
                            </ToggleButton>
                            <Rectangle x:Name="Selection" Grid.Column="1" Opacity="0" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2" HorizontalAlignment="Right">
                                <Rectangle.Fill>
                                    <SolidColorBrush x:Name="SelectionFill" Color="Black" />
                                </Rectangle.Fill>
                                <Rectangle.Stroke>
                                    <SolidColorBrush x:Name="SelectionStroke" Color="Black" />
                                </Rectangle.Stroke>
                            </Rectangle>
                            <Button x:Name="Header" Grid.Column="1" Grid.ColumnSpan="2" ClickMode="Hover" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="Center" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsTabStop="False" TabNavigation="Once">
                                <Button.Template>
                                    <ControlTemplate TargetType="Button">
                                        <Grid Background="{TemplateBinding Background}">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal" />
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Rectangle x:Name="Hover" Opacity="0" Fill="#FFBADDE9" Stroke="#FF6DBDD1" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2" />
                                            <ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" />
                                        </Grid>
                                    </ControlTemplate>
                                </Button.Template>
                                <Button.Content>
                                    <ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                                </Button.Content>
                            </Button>

                            <Border x:Name="Validation" Grid.Column="1" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="#FFDB000C" CornerRadius="2" Visibility="Collapsed">
                                <ToolTipService.ToolTip>
                                    <ToolTip x:Name="ValidationToolTip"  Placement="Right" PlacementTarget="{Binding ElementName=Header}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" />
                                </ToolTipService.ToolTip>
                                <Grid Width="10" Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
                                    <Path Margin="-1,3,0,0" Fill="#FFDC000C" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z" />
                                    <Path Margin="-1,3,0,0" Fill="#FFFFFFFF" Data="M 0,0 L2,0 L 8,6 L8,8" />
                                </Grid>
                            </Border>

                            <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Visibility="Collapsed" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Grid.Resources>
    <sdk:TreeView ItemContainerStyle="{StaticResource TreeViewItemStyle}">
        <sdk:TreeViewItem Header="Root" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center">
            <sdk:TreeViewItem Header="Alfa" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center" >
                <sdk:TreeViewItem Header="Alfa child1" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center"/>
                <sdk:TreeViewItem Header="Alfa child2" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center"/>
                <sdk:TreeViewItem Header="Alfa child3" ItemContainerStyle="{StaticResource TreeViewItemStyle}" HorizontalContentAlignment="Center"/>
            </sdk:TreeViewItem>
            <sdk:TreeViewItem Header="Beta" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
            <sdk:TreeViewItem Header="Gamma" ItemContainerStyle="{StaticResource TreeViewItemStyle}"/>
        </sdk:TreeViewItem>
    </sdk:TreeView>
</Grid>

我找到的解决方案进行了更多研究。我在以下文章中找到了理论：如何自定义 silverlight 控件：https://msdn.microsoft.com/en-us/library/cc278068(VS.95).aspx 然后我去了：

https://msdn.microsoft.com/en-us/library/dd728671(v=vs.95).aspx

我所做的是采用 treeviewitem 的默认模板，然后对其进行修改。

模板中唯一修改的是：

Grid.ColumnSpan="2" HorizontalAlignment="Center"

行中：

<Button x:Name="Header" Grid.Column="1"

如何在水平树视图中将 Silverlight 中的 treeView 元素居中？

How to center treeView elements in Silverlight in a horizontal treeview?

silverlight

treeview