John Leone John Leone - 2 months ago 11
C# Question

Rounded Buttons in XAML for a window store app

This seemed to me a really simple question 2 hours ago, but haven't made any progress with it.

My first search last night, said to create a rounded button, you just put it in a border, and round the edges of the border, like this,,,

<Border BorderThickness="1"
BorderBrush="Black"
CornerRadius="10"
Padding="4"
Background="#FFB8B1B1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Button Width="45"
Height="35"
Name="GetFileName"
VerticalAlignment="Top"
VerticalContentAlignment="Top"
BorderThickness="0"
FontSize="16"
Foreground="Black"
Tapped="GetFileName_Tapped"
Background="#FFB8B1B1">Pick</Button>
</Border>


This looks good, but I wanted one thing to look better. When you hover over the button the background changes color, but not the background of the border. To achieve this second part has stumped me. Any leads would be appreciated. Thanks, John.

Answer

One possibility is to use ControlTemplate and VisualStateManager

<Button Content="Pick"
            Width="45"
            Height="35"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            BorderThickness="0"
            FontSize="16"
            Foreground="Black"
            Tapped="GetFileName_Tapped"
            Background="#FFB8B1B1">

        <Button.Template>
            <ControlTemplate TargetType="Button">

                <Border BorderThickness="1"
                        BorderBrush="Black"
                        CornerRadius="10"
                        Padding="4"
                        Background="#FFB8B1B1">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Target="MGrid.Background" Value="#FFB8B1B1"/>
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="MGrid.Background" Value="Green"/>
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="MGrid.Background" Value="Blue"/>
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Disabled"/>


                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid x:Name="MGrid">
                        <ContentControl Content="{TemplateBinding Content}"
                                        VerticalContentAlignment="Center"
                                        HorizontalAlignment="Center"
                                        FontSize="{TemplateBinding FontSize}"
                                        Foreground="{TemplateBinding Foreground}"/>
                    </Grid>

                </Border>
            </ControlTemplate>
        </Button.Template>

    </Button>