Search code examples
c#wpfuniformgrid

How can I reposition the content of a single cell in a WPF UniformGrid?


I am creating a keypad using a UniformGrid. The keypad has the usual 0-9 buttons, plus a 'Backspace' button. I want the 'Backspace' button to be smaller than the numeric buttons, and so I have applied a RenderTransform to it. All this works fine.

However, I additionally would like the 'Backspace' button to be repositioned (realigned) Right and Bottom within the UniformGrid cell, so that it is away from the numeric buttons.

Below is an image with the red arrow indicating where I would like to move the 'Backspace' button.

I have tried placing the 'Backspace' button inside a ContentControl and setting the HorizontalContentAlignment and VeriticalContentAlignment to Right and Down respectively, but this doesn't work.

Here is some sample XAML:

   <UniformGrid Columns="3" Rows="4">
    <Button Content="1" />
    <Button Content="2" />
    <Button Content="3" />
    <Button Content="4" />
    <Button Content="5" />
    <Button Content="6" />
    <Button Content="7" />
    <Button Content="8" />
    <Button Content="9" />
    <Button />
    <Button Content="0" />
    <!--<ContentControl HorizontalContentAlignment="Right" VerticalContentAlignment ="Bottom">-->
        <Button Content="X">
            <Button.RenderTransform>
                <ScaleTransform ScaleX=".75" ScaleY=".75" />
            </Button.RenderTransform>
        </Button>
    <!--</ContentControl>-->
</UniformGrid>

Can this can be done?

enter image description here


Solution

  • Try RenderTransformOrigin

    <Button Content="X" RenderTransformOrigin="1, 1">
        <Button.RenderTransform>
            <ScaleTransform ScaleX=".75" ScaleY=".75" />
        </Button.RenderTransform>
    </Button>
    

    It should work, however I can't test right now.