如何使用"材料设计在XAML工具包"中拉伸TreeViewItem控制

时间:2018-04-05 16:32:39

标签: c# wpf material-design-in-xaml

我想在TreeViewItem中有两个控件,Textblock对齐到左边,togglebutton / content控件对齐到右边。要使用标准WPF控件执行此操作,需要覆盖标准ItemContainerStyle并删除第二列和/或将属性Horizo​​ntalContentAlignment设置为" Stretch"。但是使用Material Desing在XAML Toolkit控件中它无效。

我的代码:

    <DataTemplate x:Key="DTBooleanOption" >
        <ToggleButton DockPanel.Dock="Right"
          Style="{StaticResource MaterialDesignSwitchDarkToggleButton}"
          ToolTip="MaterialDesignSwitchDarkToggleButton"
          IsChecked="{Binding Value}" />
    </DataTemplate>
    <DataTemplate DataType="{x:Type models:Option}">
        <DockPanel HorizontalAlignment="Stretch" >
            <TextBlock Text="{Binding Name}" DockPanel.Dock="Left" HorizontalAlignment="Left" />
            <ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource OptionDataTemplateSelector}" DockPanel.Dock="Right" HorizontalContentAlignment="Stretch" HorizontalAlignment="Right"/>
        </DockPanel>
    </DataTemplate>
    <HierarchicalDataTemplate DataType="{x:Type models:OptionGroup}" ItemsSource="{Binding Items}" >
        <TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Stretch"/>
    </HierarchicalDataTemplate>


<StackPanel>
    <TreeView ItemsSource="{Binding Settings.SettingGroups}"  >
        <TreeView.ItemContainerStyle>
            <Style TargetType="TreeViewItem" BasedOn="{StaticResource MaterialDesignTreeViewItem}">
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <!--<Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TreeViewItem"  >
                            <StackPanel>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"
                            MinWidth="19" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                </Grid>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>--> 
            </Style>
        </TreeView.ItemContainerStyle>
    </TreeView>
</StackPanel>

如何拉伸它以将一个控件左对齐,一个对齐?

Sample

1 个答案:

答案 0 :(得分:1)

1)你错了:

<Setter Property="VerticalContentAlignment" Value="Stretch" />

应该是:

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

2)您的停靠面板应如下所示:

<DockPanel HorizontalAlignment="Stretch" LastChildFill="True" >
    <ToggleButton DockPanel.Dock="Right"
      Style="{StaticResource MaterialDesignSwitchDarkToggleButton}"
      ToolTip="MaterialDesignSwitchDarkToggleButton"
       />
    <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" />
</DockPanel>