Search code examples
c#wpfxamlsilverlightcomponentone

Silverlight: Align button controls to right inside Datagrid cell


I have been trying this for a while. I am just stuck and can't get through it.

There are three controls in the datagrid cell.

1: A hyperlink Button 2: A clear button 3: A search button

What i need to do is to align the "clear" and "open button" align to the right of the column. The catch is the column is resizable. I tried to give a fixed width to the hyperlink button it looks good but it gets messy when the column is resized.

The cell content has below style.

<Style TargetType="controls:HyperlinkClear">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:HyperlinkClear">
                    <Border  BorderThickness="0" Margin="2" BorderBrush="Transparent">
                        <Border.Resources>
                            <Style x:Name="buttonStyle"
                                   TargetType="Button">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Grid Width="12"
                                                  Height="12">
                                                <TextBlock  Margin="{TemplateBinding Margin}" Text="x"></TextBlock>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Border.Resources>
                        <controlsToolkit:DockPanel Background="Transparent">
                            <Button Margin="-2,0,0,0" controlsToolkit:DockPanel.Dock="Right" HorizontalAlignment="Right" x:Name="MainSearchButton" Style="{StaticResource ButtonStyle}"  IsTabStop="False"
                                    Visibility ="{Binding IsRemoveButtonEnabled,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay}">
                                <Image Source="./open.png"  Height="14" Width="16" VerticalAlignment="Center"/>
                            </Button>
                            <Button controlsToolkit:DockPanel.Dock="Right" Cursor="hand" 
                                    Margin="3,-2,0,0" Visibility ="{Binding IsRemoveButtonEnabled,Converter={StaticResource BoolToVisibilityConverter},Mode=TwoWay}"
                                    x:Name="RemoveItemButton" HorizontalAlignment="Right"
                                    Style="{StaticResource buttonStyle}" IsTabStop="false"/>

                            <HyperlinkButton x:Name="HyperlinkButton"  Style="{StaticResource HyperlinkButtonStyle}" Content="{TemplateBinding Content}" />
                        </controlsToolkit:DockPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Currently it looks like this. DataGrid column

Expected enter image description here


Solution

  • I found the solution. The solution is to set the cellcontent's horizontal alignment to "Stretch".

    Override the BindCellContent Method of the column.

    public override void BindCellContent(FrameworkElement cellContent, DataGridRow row)
    {
    var hyperlinkButton = (HyperlinkClear)cellContent;
    hyperlinkButton.HorizontalAlignment = HorizontalAlignment.Stretch;
    }