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.