Как сохранить кнопку справа от заголовка таблицы данных

Question

Я хочу добавить кнопку в столбец заголовка таблицы данных и оставить ее у самого правого края столбца заголовка ... независимо от ее ширины. В моем коде Xaml я использую DataTemplate , где я прикрепляю заголовок столбца заголовка и добавляю кнопку переключения со всплывающим окном.

<DataGrid>
 <DataGrid.Resources>
    <DataTemplate x:Key="HeaderTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
     <DataGrid.Resources>
            <ContentControl Content="{Binding}" VerticalAlignment="Center"/>

            <!--TODO: THIS IS THE BUTTON I WANT TO ANCHOR TO THE RIGHT-->
            <ToggleButton Name="FilterButton" Grid.Column="1" Content="▼" Margin="2, 1, 1, 1" Padding="1, 0"/>
           <Popup IsOpen="{Binding ElementName=FilterButton, Path=IsChecked}" PlacementTarget="{Binding ElementName=FilterButton}" StaysOpen="False">
            <Border Background="White" Padding="3">
              <TextBox Width="300"/>
            </Border>
           </Popup>
        </Grid>
</DataTemplate>
</DataGrid.Resources>

Когда я запускаю В моем приложении я вижу столбец заголовка с кнопкой переключения рядом с ним. Но мне нужно, чтобы он был в самом правом верхнем углу любого заголовка столбца. Вот так:

Может ли кто-нибудь помочь мне понять, как go сделать это с помощью текущего кода?

Answer 1

После небольшого возни, вот что я сделал, чтобы заставить его работать:

<DataGrid>
    <DataGrid.Resources>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
        <DataTemplate x:Key="HeaderTemplate">
            <Grid Margin="0, 0, -5, 0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <ContentControl Content="{Binding}" VerticalAlignment="Center"/>

                <!--TODO: THIS IS THE BUTTON I WANT TO ANCHOR TO THE RIGHT-->
                <ToggleButton Name="FilterButton" Grid.Column="1" Content="▼" Margin="2, 1, 1, 1" Padding="1, 0"/>
                <Popup IsOpen="{Binding ElementName=FilterButton, Path=IsChecked}" PlacementTarget="{Binding ElementName=FilterButton}" StaysOpen="False">
                    <Border Background="White" Padding="3">
                        <TextBox Width="300"/>
                    </Border>
                </Popup>
            </Grid>
        </DataTemplate>
    </DataGrid.Resources>

    <DataGrid.Columns>
        <DataGridTextColumn HeaderTemplate="{StaticResource HeaderTemplate}" Header="Test"/>
    </DataGrid.Columns>
</DataGrid>

Есть два ключевых изменения.

Во-первых, я добавил это в DataGrid.Resources:

<Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>

Что позволяет HeaderTemplate заполнить весь заголовок.

Во-вторых, я добавил отрицательное правое поле к Grid:

<Grid Margin="0, 0, -5, 0">

Это компенсирует внутреннее заполнение шаблона элемента управления заголовка, перемещая кнопку полностью вправо.

Answer 2

Проблема здесь в том, что содержимое внутри заголовка автоматически масштабируется. Что вам нужно сделать, так это изменить горизонтальное выравнивание контента. Вы можете определить стиль для заголовка столбца, и это решит проблему.

<DataGrid.Resources>
    <Style  TargetType="DataGridColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</DataGrid.Resources>