Use DateTrigger to animate width of a Grid Column
I've linked the desised result
I'm trying to make a grid collum occupy most of the window when the user's cursor is over a 'border' element.
However, I can't get the CollumDefention width to change
I'd be grateful for any pointers/solutions
<Page x:Class="Together_Culture_CRM.LoginRegister"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Together_Culture_CRM"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="LoginRegister">
<Page.Resources>
</Page.Resources>
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Name="LeftCollum" Width="4*">
<ColumnDefinition.Resources>
<Style x:Key="PanelSwipe"
TargetType="ColumnDefinition">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=LeftBorder, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="1" Duration="00:00:00.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Resources>
</ColumnDefinition>
<ColumnDefinition Name="RightCollum" Width="4*">
<ColumnDefinition.Resources>
<Style x:Key="PanelSwipe"
TargetType="ColumnDefinition">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=RightBorder, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="1" Duration="00:00:20">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Resources>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Name="LeftBorder"
Margin="20,20,10,20">
</Border>
<Border Name="RightBorder"
Margin="10,20,20,20"
Grid.Column="1">
</Border>
</Grid>
</Page>
<Page x:Class="Together_Culture_CRM.LoginRegister"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Together_Culture_CRM"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="LoginRegister">
<Page.Resources>
</Page.Resources>
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Name="LeftCollum" Width="4*">
<ColumnDefinition.Resources>
<Style x:Key="PanelSwipe"
TargetType="ColumnDefinition">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=LeftBorder, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="1" Duration="00:00:00.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Resources>
</ColumnDefinition>
<ColumnDefinition Name="RightCollum" Width="4*">
<ColumnDefinition.Resources>
<Style x:Key="PanelSwipe"
TargetType="ColumnDefinition">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=RightBorder, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="1" Duration="00:00:20">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Resources>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Name="LeftBorder"
Margin="20,20,10,20">
</Border>
<Border Name="RightBorder"
Margin="10,20,20,20"
Grid.Column="1">
</Border>
</Grid>
</Page>
1 Reply
Resolved