CODEWITHSUNDEEP
c#xamlwindows-runtime
Digitoxin
Digitoxin

Reputation: 13

Control Template - XAML WinRT Button Padding

I have started with XAML as part of my freetime and now I have a problem with the padding of the standard button. I have the following code for a grid which resides in another grid, so I have four grids inside my page and the problem is that the buttons are cut off and I am not able to change the width or the padding of the buttons.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Center" FontSize="24"/>
    <Button x:Name="Player2MinusButton" Content="-" Grid.Row="1" Grid.Column="0" FontSize="20" ></Button>
    <Button x:Name="Player2PlusButton" Content="+" Grid.Row="1" Grid.Column="2" FontSize="20" ></Button>
</Grid>

The problem is now, that the button is cut of as you could see in the screenshot here:

enter image description here

I have already tried to set a negative padding/margin and also to make a Custom Style:

<Style TargetType="Button" x:Key="ButtonStyle">
    <Setter Property="Padding" Value="-10,0"/>
</Style>

Thanks for your hints and I hope I have nothing forgotten in my first question. Michael

Upvotes: 1

Views: 475

Answers (1)

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21919

Since you want a narrower than standard button set the Buttons' MinWidth property:

<Button x:Name="Player2PlusButton" Content="+" Grid.Row="1" Grid.Column="2" FontSize="20" MinWidth=50 AutomationProperties.Name="Plus Button" ></Button>

If you copy the button template (right click on the button in the designer then select Edit Template... and follow the prompts) you'll find the following:

<x:Double x:Key="PhoneButtonMinHeight">57.5</x:Double>
<x:Double x:Key="PhoneButtonMinWidth">109</x:Double>

I assume you're running on the phone: the Windows Store Button template is different and doesn't set the minimums. Your buttons come out small there by default.

Upvotes: 1

Related Questions