Horizontal aligment WPF expander header

问题

I want to show my GroupName on left and button "ShowOnly" on the right of header row. I tried with this code but doesn't works. Could anyone help me? Thx

My code :

<Expander IsExpanded="True" >
    <Expander.Header>
        <DockPanel HorizontalAlignment="Stretch">
            <TextBlock Text="{Binding Path=Name}" FontSize="18"></TextBlock>
            <Button Style="{StaticResource ButtonStyle}" Content="Show Only" HorizontalAlignment="Right" Padding="15,0,15,0" Click="Button_Click"></Button>
        </DockPanel>
    </Expander.Header>
    <Expander.Style>
        <Style TargetType="{x:Type Expander}">
            <Setter Property="Background" Value="#f0f0f5"></Setter>
            <Setter Property="TextElement.FontFamily" Value="Arial Nova"/>
        </Style>
    </Expander.Style>
    <Expander.Content>
        <ItemsPresenter />
    </Expander.Content>
</Expander>

My ButtonStyle :

<Style x:Key="ButtonStyle" TargetType="Button">

            <Setter Property="Background" Value="#66e0ff" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="15" />
            <Setter Property="SnapsToDevicePixels" Value="True" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border CornerRadius="4" Background="{TemplateBinding Background}">
                            <Grid>
                                <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="White" />
                                <Setter Property="Foreground" Value="#66e0ff" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

    </Style>

I tried also with an DockPanel, but same result.

回答1:

You need to set the HorizontalAlignment property of the ContentPresenter that is defined in the Expander's default control template to Stretch.

The easiest way to do this is probably to handle the Loaded event of the Expander and use a helper method that finds the ContentPresenter in the visual tree:

private void Expander_Loaded(object sender, RoutedEventArgs e)
{
    Expander expander = sender as Expander;
    System.Windows.Controls.Primitives.ToggleButton HeaderSite = GetChildOfType<System.Windows.Controls.Primitives.ToggleButton>(expander);
    if (HeaderSite != null)
    {
        ContentPresenter cp = GetChildOfType<ContentPresenter>(HeaderSite);
        if (cp != null)
            cp.HorizontalAlignment = HorizontalAlignment.Stretch;
    }
}

private static T GetChildOfType<T>(DependencyObject depObj) where T : DependencyObject
{
    if (depObj == null) return null;

    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
    {
        var child = VisualTreeHelper.GetChild(depObj, i);

        var result = (child as T) ?? GetChildOfType<T>(child);
        if (result != null) return result;
    }
    return null;
}

<Expander IsExpanded="True" Loaded="Expander_Loaded">
    <Expander.Header>
        <DockPanel HorizontalAlignment="Stretch">
            <Button Style="{StaticResource ButtonStyle}" Content="Show Only" DockPanel.Dock="Right" Padding="15,0,15,0" Click="Button_Click"></Button>
            <TextBlock Text="{Binding Path=Name}" FontSize="18"></TextBlock>
        </DockPanel>
    </Expander.Header>
    <Expander.Style>
        <Style TargetType="{x:Type Expander}">
            <Setter Property="Background" Value="#f0f0f5"></Setter>
            <Setter Property="TextElement.FontFamily" Value="Arial Nova"/>
        </Style>
    </Expander.Style>
    <Expander.Content>
        <ItemsPresenter />
    </Expander.Content>
</Expander>

回答2:

Set width of DockPanel to width of expander so that it will stretch properly.

<DockPanel HorizontalAlignment="Stretch" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Expander}}, Path=ActualWidth}">

回答3:

You can refer to these solutions:

https://joshsmithonwpf.wordpress.com/2007/02/24/stretching-content-in-an-expander-header/

来源：https://stackoverflow.com/questions/43181225/horizontal-aligment-wpf-expander-header

标签

wpf

header

styles

expander