C# MVVM侧边导航栏TreeView代码展开箭头靠右
时间: 2024-03-09 15:06:55 浏览: 151
您可以通过修改TreeView的控件模板来实现侧边导航栏TreeView展开箭头靠右的效果。具体步骤如下:
1. 在XAML中定义TreeView控件,并设置其控件模板:
```
<TreeView ItemsSource="{Binding TreeItems}">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Width="16" Height="16" Background="Transparent">
<Path x:Name="ExpandPath" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 4 0 L 8 4 L 4 8 Z" Fill="White"/>
</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>
</ToggleButton.Style>
</ToggleButton>
<ContentPresenter Grid.Column="1" Content="{TemplateBinding Header}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter 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 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>
</TreeView.ItemContainerStyle>
</TreeView>
```
2. 在控件模板中,将ToggleButton控件放在Grid的第一个列中,并设置其宽度为16,高度为16。同时,将ContentPresenter控件放在Grid的第二个列中。
3. 在ToggleButton控件的控件模板中,将箭头图标放在一个宽度和高度均为16的Grid中,并设置其HorizontalAlignment和VerticalAlignment属性为Center,以使箭头图标居中显示。
4. 在箭头图标的控件模板中,设置箭头图标的数据为"M 4 0 L 8 4 L 4 8 Z",以使箭头朝右显示。
5. 在箭头图标的控件模板中,添加一个Trigger,当ToggleButton的IsChecked属性为True时,将箭头图标的数据设置为"M 0 4 L 8 4 L 4 8 Z",以使箭头朝下显示。
这样就可以实现侧边导航栏TreeView展开箭头靠右的效果了。
阅读全文