CODEWITHSUNDEEP
c#wpfxaml
vrwim
vrwim

Reputation: 14270

How can I stretch a Border inside a Button?

I am writing a form for a WPF app, and I'd like to use the visual states that Button offers. So my XAML is like this right now:

<Button
    Grid.Column="0"
    Name="GenderMaleButton"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    BorderThickness="0"
    Padding="0">
    <Border
        Background="White"
        BorderThickness="2"
        CornerRadius="5"
        Padding="5"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
        <TextBlock/>
    </Border>
</Button>

But my Border is not filling my Button. How can I make the Border fill the Button? Or how can I use the visual states of the Button to affect the Border in another way than wrapping the Border inside the Button?

Or can I apply visual states to my Border? If so, how?

EDIT: the result I want is like this:

result

So a selected state (white border, blue bg), and a default state (blue border, white bg).

Upvotes: 0

Views: 730

Answers (3)

Logan
Logan

Reputation: 816

Try this:

<StackPanel Height="40" Orientation="Horizontal">
        <StackPanel.Resources>
            <Style x:Key="GenderButtonStyle" TargetType="{x:Type Button}">
                <Setter Property="MinWidth" Value="100" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="InternalBorder"
                                    CornerRadius="5"
                                    Padding="5">
                                <TextBlock x:Name="InternalText"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Text="{TemplateBinding Content}" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Tag" Value="Male">
                                    <Setter TargetName="InternalBorder" Property="Background" Value="RoyalBlue" />
                                    <Setter TargetName="InternalText" Property="Foreground" Value="White" />
                                </Trigger>
                                <Trigger Property="Tag" Value="Female">
                                    <Setter TargetName="InternalBorder" Property="Background" Value="White" />
                                    <Setter TargetName="InternalBorder" Property="BorderBrush" Value="RoyalBlue" />
                                    <Setter TargetName="InternalBorder" Property="BorderThickness" Value="1,1,1,1" />
                                    <Setter TargetName="InternalText" Property="Foreground" Value="RoyalBlue" />
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <!--  Whatever you want  -->
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <!--  Whatever you want  -->
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>
        <Button x:Name="MaleButton"
                Content="Male"
                Style="{StaticResource GenderButtonStyle}"
                Tag="Male" />
        <Button x:Name="FemaleButton"
                Margin="5,0,0,0"
                Content="Female"
                Style="{StaticResource GenderButtonStyle}"
                Tag="Female" />
    </StackPanel>

To explain what I've done; I placed two buttons inside a horizontal <StackPanel/> and in its resources subtag I've made a Button Style that can then be assigned to any button you want. Inside that style I've cracked open the Template and built my own small one that does what you described.

Generally, if a control isn't looking quite the way you want as-is, the best thing to do is open up the template it's made of and make your own. Like this, you can now define what it should look like when you mouse-over or focus it or press it.

Upvotes: 1

Justin CI
Justin CI

Reputation: 2741

From a hard guess , I think you need to fill the border inside the button.Try the code below.Use ControlTemplate

<Button Grid.Column="0"
        Name="GenderMaleButton"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        BorderThickness="0"
        Padding="0">

        <Button.Template>
            <ControlTemplate>                
                <Border Background="#6A6B9A"
                        BorderThickness="2"
                        CornerRadius="5"
                        Padding="5"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                        <TextBlock TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" Text="Male"></TextBlock>
                </Border>              
            </ControlTemplate>
        </Button.Template>
    </Button>

Upvotes: 2

filhit
filhit

Reputation: 2154

You should have set HorizontalContentAlignment and VerticalContentAlignment to Stretch.

<Button
Grid.Column="0"
Name="GenderMaleButton"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
BorderThickness="0"
Padding="0">
    <Border
    Background="White"
    BorderThickness="2"
    CornerRadius="5"
    Padding="5"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">
        <TextBlock/>
    </Border>
</Button>

Upvotes: 1

Related Questions