CODEWITHSUNDEEP
c#wpf
Robby Smet
Robby Smet

Reputation: 4661

Expanding buttons

I've created a window with a bunch of buttons. Those buttons are a usercontrol I created.

This is what my window looks like now, it contains 11 of my usercontrols, but the number of usercontrols on the window are dynamically:

enter image description here

When the users hovers over a button with his mouse, I want the control to expand 20 pixels.
The problem is that the control expands, but the other controls stay at their place so they overlapse.

This is my UserControl

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="UserControlSolution.UserControlButton"
x:Name="UserControl"
Height="50">
<UserControl.Resources>
    <Storyboard x:Key="OnMouseEnter1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0" Value="1.5"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0" Value="12.5"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
    </EventTrigger>
</UserControl.Triggers>

<Grid x:Name="LayoutRoot" Height="50">
    <Rectangle x:Name="rectangle" RenderTransformOrigin="0.5,0.5">
        <Rectangle.Stroke>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF5C5C5C" Offset="0"/>
                <GradientStop Color="#FF4E4E4E" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Stroke>
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF626262" Offset="0"/>
                <GradientStop Color="#FF3B3B3B" Offset="0.987"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock x:Name="NameLabel" FontFamily="Levenim MT" FontSize="16" Foreground="#FFE5E5E5" Height="34" Width="230" Text="Onthaal Telefoon" VerticalAlignment="Top" TextAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0"/>
</Grid>

This is my window

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:UserControlSolution" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="UserControlSolution.MainWindow"
    Title="MainWindow" Height="836" Width="262" Background="#FF2B2B2B" BorderBrush="{DynamicResource Border}" Loaded="Window_Loaded" >

<Window.Resources>

    <LinearGradientBrush x:Key="Border" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
        <GradientStop Color="#FF6C6C6C" Offset="0.009"/>
        <GradientStop Color="#FFA1A1A1" Offset="1"/>
    </LinearGradientBrush>

</Window.Resources>

<StackPanel Margin="0,10,0,0">
    <local:UserControlButton x:Name="Robby" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Erwin" HorizontalAlignment="Center" Height="50" VerticalAlignment="Top" Width="228" Background="Black" Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Laurens" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top"  Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Kevin" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Liesbeth" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Jack" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Filip" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Stefaan" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Sami" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Jurgen" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/>
    <local:UserControlButton x:Name="Thomas" HorizontalAlignment="Center" Width="228" Background="Black" Height="50" VerticalAlignment="Top" Margin="0,0,0,10"/>
</StackPanel>

How can I move the controls under the expanding control down so that they don't overlapse? Or what is a better solution?

Upvotes: 0

Views: 83

Answers (1)

thumbmunkeys
thumbmunkeys

Reputation: 20764

You have to change the LayoutTransform and not the RenderTransform in order to affect the layouting of the other elements

Upvotes: 1

Related Questions