4

Is it possible to move two contentcontrol inside a button and also resize this said button?

<Button Height="100" Width="100">
  <Grid>
    <Grid.RowDefinitions>
       <RowDefinition height="30"/>
       <RowDefinition height="30"/>
    </Grid.RowDefinitions>
    <Image Grid.Row="0" Source="img.jpg"/>
    <TextBlock Grid.Row="1" Text="Some content"/>
  </Grid>
</Button>

I would like to align them horizontally instead of vertically on MouseOver and resize the button from 100 to 50, is this possible ?

2 Answers 2

4

This can be achieved with a style:

<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="LightGray"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Height" Value="100"/>
    <Setter Property="Width" Value="100"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <UniformGrid x:Name="uGrid">
                        <Image Source="img.jpg" />
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </UniformGrid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="false">
                        <Setter TargetName="uGrid" Property="Rows" Value="2" />
                        <Setter TargetName="uGrid" Property="Columns" Value="1" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="uGrid" Property="Columns" Value="2" />
                        <Setter TargetName="uGrid" Property="Rows" Value="1" />
                        <Setter Property="Height" Value="50" />
                        <Setter Property="Width" Value="50" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This style defines a modified template for your button, and can leverage triggers to respond to mouse events.

To add the style to your button, do the following:

<Grid>
    <Grid.Resources>
        <!-- Put Style Here -->
    </Grid.Resources>
    <Button Style="{DynamicResource ExampleButtonStyle}">
        <TextBlock Grid.Row="1" Text="Some content"/>
    </Button>
</Grid>

How you distribute your code between the style and the control instance is up to you. You will likely want to keep things modular and reusable.

Anatomy of a Style

If you haven't explored styles before, they can be a bit daunting and verbose. I have explained the components of the provided style below.

You would start a new style by declaring the Style. Here you must nominate a target type (what you want to apply the style to) and a Key (the name of the style resource:

<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}">

    <!-- Style content goes here. -->

</Style>

Setters are used to make the style apply values to properties of the target control. For example:

    <Setter Property="Background" Value="LightGray"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Height" Value="100"/>
    <Setter Property="Width" Value="100"/>

Because you want to change the layout of the button, you will want to nominate a control template. To do this, use a Setter to set the Template property of the button. The template here can include any layout you want. The ContentPresenter is used to display the body of the Button tag from your implementation:

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <UniformGrid x:Name="uGrid">
                        <Image Source="img.jpg" />
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </UniformGrid>
                </Border>

                <ControlTemplate.Triggers>
                    <!-- Triggers here --> 
                </ControlTemplate.Triggers>                   

            </ControlTemplate>
        </Setter.Value>
    </Setter>

Finally, you need to add triggers to make the control template update with interaction. The trigger essentially observes a property of the control, and applies when its value matches the value nominated by the trigger. This updates the control using the setters within.

<Trigger Property="IsMouseOver" Value="false">
    <Setter TargetName="uGrid" Property="Rows" Value="2" />
    <Setter TargetName="uGrid" Property="Columns" Value="1" />
</Trigger>

Layout

To achieve your layout goal I used a UniformGrid. The UniformGrid divides itself into equal cells to match the number of content items within. Note that this is available in WPF, but not UWP. On the UniformGrid, you can set a Columns or Rows count, and the grid will compensate as necessary. In the style above, I am changing the nominated Row and Column counts and letting the grid adjust itself layout accordingly. This visually swaps content from rows to columns.

Concerns

There are other methods that could achieve this more elegantly, but Styles offer a large amount of flexibility, and have a smaller learning curve.

You stated that you wanted to change the button size from 100 to 50 (I am assuming on both axis?) and I must advise you against this. You will see what happens when you apply the provided style; the button starts as a 100x100 square. A user moves the mouse over the button to just inside the button's edge. The button rapidly changes from 50x50 to 100x100 until the mouse is moved to the centre or off the button entirely. This offers a poor and confusing user experience, and deserves some more thought.

3
  • No comment ! Well i dont know how to thank you, this is too much ... THANK YOU INFINITELY
    – Erica Swan
    Jul 31, 2017 at 0:51
  • PS : About the button size, that is a good point, i will see if it wont be troublesome to the user, but i have to say that i am just changing the height not the width, it is some kind of a slide menu, once the height is 50 a collaped grid will raise in the free 50 ... Might be confusing ^^"
    – Erica Swan
    Jul 31, 2017 at 1:03
  • 2
    No problem. It might be easier to put that collapsing behaviour into the button entirely so the same trigger can 'uncollapse it'. If it is in the button, you can probably avoid the rapid-change problem. Although it is easy to think of things in terms of grids, you might find it more freeing to change other properties to simulate the same behaviour, such as margin and padding. Eg, showing a grid below something, might be similar to adding a margin below instead. As your XAML grows, things like this can make it less confusing to read. IE Grids are for layout, not adhoc positioning.
    – Élie
    Jul 31, 2017 at 1:10
1

this might be late, but according to what have been said in the comments, this could do the trick, i have worked on something similar recently

    <Style x:Key="btnSubMenu" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="FontWeight" Value="ExtraBold"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <Grid x:Name="uGrid2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <Image Grid.Row="0" Source="/Images/1.png" />
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Grid Grid.Row="2" Name="Gbexample" Visibility="Collapsed">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="40"/>
                            </Grid.RowDefinitions>
                            <Button Grid.Row="0" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCity}" Name="btnCity"/>
                            <Button Grid.Row="1" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCountry}" Name="btnCountry"/>
                            <Button Grid.Row="2" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strStore}" Name="btnStoreIn"/>
                            <Button Grid.Row="3" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strLocation}" Name="btnLocation"/>
                        </Grid>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="false">
                        <Setter TargetName="Gbproduct" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Gbproduct" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.