How to stretch TreeViewItem using "Material Design In XAML Toolkit" controls

Question

I would like to have two controls inside TreeViewItem, Textblock aligned to left and togglebutton/content control aligned to right. To do it using standard WPF controls there would be need to override standard ItemContainerStyle and delete 2nd column and/or set property HorizontalContentAlignment to "Stretch". But with Material Desing In XAML Toolkit controls it is not working.

My code:

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

How can I stretch it to align one control to left, and one to right?

James Willock James Willock · Accepted Answer · 2018-04-06T08:35:07

1) you have this wrong:

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

should be:

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

2) your dock panel should look something like:

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

How to stretch TreeViewItem using "Material Design In XAML Toolkit" controls

1 Answers