我需要做一个组织结构图创建器,所以我选择了treeView用户控件。
我找到了下一个让项目水平的例子: Changing the TreeView ItemsPanel orientation has no effect
我为所有元素设置了样式,现在孩子们是水平的并且居中了:)
除了父母!我怎样才能让父母居中?请帮忙
<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>
答案 0 :(得分:0)
获得全部居中的水平树视图的完整代码是:
<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"