Home > Back-end >  C# WPF TreeViewItem align Content
C# WPF TreeViewItem align Content

Time:04-12

I have a problem with the WPF element "TreeViewItem". Namely, I want to place the content (text) in the middle, but unfortunately I can't get this. Here is my problem: Picture of problem

And here my code:

var treeViewItem = new TreeViewItem
            {
                Header = name,
                IsSelected = false,
                Padding = new Thickness(0, 0, 200, 0),
                HorizontalContentAlignment = HorizontalAlignment.Center
            };

I hope you can help me, thanks for the answers :)

CodePudding user response:

The solution to the problem was that I also had to set Padding to 200 at the beginning, so:

 var treeViewItem = new TreeViewItem
            {
                Header = name,
                IsSelected = false,
                Padding = new Thickness(200, 0, 200, 0),
                HorizontalContentAlignment = HorizontalAlignment.Center
            };

CodePudding user response:

The correct solution is to override the TreeViewItem template to modify the content layout. The item's content is arranged using a Grid. You simply have to make the Border, that contains the item header's ContentPresenter, span the last two columns. This allows the TreeViewItem to stretch to occupy the available space.
As the final step, the TreeView.HorizontalContentAlignment must be set to Center.

Using a solution that relies on absolute positioning like applying a Padding or Margin is not optimal. Such a solution makes the whole layout static. The TreeView will no longer resize properly.

TreeViewItem Style

<Style TargetType="TreeViewItem">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="TreeViewItem">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="19"
                              Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
          </Grid.RowDefinitions>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Selected">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
                                                Storyboard.TargetProperty="(Panel.Background).
      (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                          Value="{StaticResource SelectedBackgroundColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Unselected" />
              <VisualState x:Name="SelectedInactive">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
                                                Storyboard.TargetProperty="(Panel.Background).
      (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                          Value="{StaticResource SelectedUnfocusedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ExpansionStates">
              <VisualState x:Name="Expanded">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                  Storyboard.TargetName="ItemsHost">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{x:Static Visibility.Visible}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Collapsed" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ToggleButton x:Name="Expander"
                        Style="{StaticResource ExpandCollapseToggleStyle}"
                        ClickMode="Press"
                        IsChecked="{Binding IsExpanded, 
RelativeSource={RelativeSource TemplatedParent}}" />
          <Border x:Name="Bd"
                  Grid.Column="1"
                  Grid.ColumnSpan="2"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Padding="{TemplateBinding Padding}">
            <ContentPresenter x:Name="PART_Header"
                              ContentSource="Header"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
          </Border>
          <ItemsPresenter x:Name="ItemsHost"
                          Grid.Row="1"
                          Grid.Column="1"
                          Grid.ColumnSpan="2"
                          Visibility="Collapsed" />
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="HasItems"
                    Value="false">
            <Setter TargetName="Expander"
                    Property="Visibility"
                    Value="Hidden" />
          </Trigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="HasHeader"
                          Value="false" />
              <Condition Property="Width"
                          Value="Auto" />
            </MultiTrigger.Conditions>
            <Setter TargetName="PART_Header"
                    Property="MinWidth"
                    Value="75" />
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="HasHeader"
                          Value="false" />
              <Condition Property="Height"
                          Value="Auto" />
            </MultiTrigger.Conditions>
            <Setter TargetName="PART_Header"
                    Property="MinHeight"
                    Value="19" />
          </MultiTrigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
  • Related