FluidMoveSetTagBehavior stretching Text vertically - wpf

I've recently start to learn all about FluidMoveSetTagBehavior and FluidMoveBehavior using Microsoft Expression Blend and Visual Studio 2010. Following a few examples I've found on the web, I've created the below sample which works well apart from a small problem.
I have been trying to test creating an animation to show an update of a TextBlock when a ListViewItem is selected.
When an item is selected in the ListView the text does move to the TextBlock as per the FluidMoveBehavior but the text is stretched vertically during the animation phase. It then snaps back correctly within the TextBlock once the animation ends. I initially had this problem with horizontal stretching too but I was able to solve this adding a few HorizontalAlignment="Left" properties. No such luck VerticalAlignment properties though.
Xaml Code
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<WrapPanel>
<TextBox Height="23" Name="TextBox1" Margin="4" VerticalAlignment="Center" Width="120" />
<Button Content="Add" Margin="4" Name="Button1" VerticalAlignment="Top" Width="75" />
<Button Content="Remove" Margin="4" Name="Button2" VerticalAlignment="Top" Width="75" />
</WrapPanel>
<ListView Grid.Row="1" Height="150" Name="ListView1" SelectionMode="Single" VerticalAlignment="Top">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel >
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior Duration="0:0:0.5" AppliesTo="Children">
<ei:FluidMoveBehavior.EaseY>
<QuarticEase EasingMode="EaseInOut"/>
</ei:FluidMoveBehavior.EaseY>
<ei:FluidMoveBehavior.EaseX>
<QuarticEase EasingMode="EaseInOut"/>
</ei:FluidMoveBehavior.EaseX>
</ei:FluidMoveBehavior>
</i:Interaction.Behaviors>
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="14" HorizontalAlignment="Left" TextWrapping="Wrap"
Opacity="0" TextAlignment="Center" Height="23" >
<i:Interaction.Behaviors>
<ei:FluidMoveSetTagBehavior Tag="DataContext"/>
</i:Interaction.Behaviors>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Duration="00:00:01"
From="0"
To="1" BeginTime="00:00:00.4000000" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="FrameworkElement.Unloaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Duration="00:00:01"
From="1"
To="0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Column="1" Grid.Row="1">
<TextBlock DataContext="{Binding SelectedItem, Mode=TwoWay, ElementName=ListView1}" HorizontalAlignment="Left"
TextWrapping="Wrap" FontSize="14" Text="{Binding Mode=OneWay}" Height="23" >
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior InitialTag="DataContext" Duration="0:0:2">
<ei:FluidMoveBehavior.EaseX>
<CircleEase EasingMode="EaseOut"/>
</ei:FluidMoveBehavior.EaseX>
</ei:FluidMoveBehavior>
</i:Interaction.Behaviors>
</TextBlock>
</StackPanel>
</Grid>
Code Behind
Class MainWindow
Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
ListView1.Items.Insert(0, TextBox1.Text)
End Sub
Private Sub Button2_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button2.Click
ListView1.Items.Remove(ListView1.Items(0))
End Sub
End Class
Hope someone can help.

Related

Navigation Bar Using WPF error (Cannot resolve all property references in the property path)

i have worked in Windows form development & new for WPF Development. i don't have any idea about Xaml development. i wrote some code but facing Error
An unhandled exception of type 'System.InvalidOperationException' occurred in PresentationFramework.dll Additional information: Cannot resolve all property references in the property path 'FrameworkElement.Width'.
Below is my Xaml Code.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="600" Width="1080" ResizeMode="NoResize" WindowStyle="None" Foreground="White"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" >
<Window.Resources>
<Storyboard x:Key="MenuOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="FrameworkElement.Width" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="60"></EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"></EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuClose">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="FrameworkElement.Width" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="200"></EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"></EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
<BeginStoryboard Storyboard="{StaticResource MenuOpen}"></BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
<BeginStoryboard Storyboard="{StaticResource MenuClose}"></BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid Background="LightGray">
<Grid Height="60" VerticalAlignment="Top" Background="#FF1368BD">
<TextBlock Text="Tuck Shop Management System" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22"></TextBlock>
<StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock Text="User Profile" VerticalAlignment="Center" FontSize="18"></TextBlock>
<materialDesign:PopupBox Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
<StackPanel Width="150">
<Button Content="Account"></Button>
<Button Content="Setting"></Button>
<Button Content="Help"></Button>
<Separator></Separator>
<Button x:Name="ButtonPopoutLogout" Content="Logout" Click="ButtonPopoutLogout_Click"></Button>
</StackPanel>
</materialDesign:PopupBox>
</StackPanel>
</Grid>
<Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF1A3761">
<StackPanel>
<Grid Height="150" Background="White">
<Button x:Name="ButtonCloseMenu" VerticalAlignment="Top" HorizontalAlignment="Right" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" Click="ButtonCloseMenu_Click">
<materialDesign:PackIcon Kind="ArrowLeft" Foreground="#FF1A3761" Width="25" Height="25" Visibility="Collapsed"></materialDesign:PackIcon>
</Button>
<Button x:Name="ButtonOpenMenu" VerticalAlignment="Top" HorizontalAlignment="Right" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" Click="ButtonOpenMenu_Click">
<materialDesign:PackIcon Kind="Menu" Foreground="#FF1A3761" Width="25" Height="25"></materialDesign:PackIcon>
</Button>
</Grid>
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="#FF1368BD" MouseDown="ListView_MouseDown">
<ListViewItem Height="60" x:Name="Home">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ViewDashboard" Height="25" Width="25" Margin="10" VerticalAlignment="Center"></materialDesign:PackIcon>
<TextBlock Text="Home" VerticalAlignment="Center" Margin="20 10"></TextBlock>
</StackPanel>
</ListViewItem>
<ListViewItem Height="60">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Pencil" Height="25" Width="25" Margin="10" VerticalAlignment="Center"></materialDesign:PackIcon>
<TextBlock Text="Create" VerticalAlignment="Center" Margin="20 10"></TextBlock>
</StackPanel>
</ListViewItem>
<ListViewItem Height="60">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Ticket" Height="25" Width="25" Margin="10" VerticalAlignment="Center"></materialDesign:PackIcon>
<TextBlock Text="Ticket" VerticalAlignment="Center" Margin="20 10"></TextBlock>
</StackPanel>
</ListViewItem>
<ListViewItem Height="60">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Message" Height="25" Width="25" Margin="10" VerticalAlignment="Center"></materialDesign:PackIcon>
<TextBlock Text="Message" VerticalAlignment="Center" Margin="20 10"></TextBlock>
</StackPanel>
</ListViewItem>
<ListViewItem Height="60">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="GithubBox" Height="25" Width="25" Margin="10" VerticalAlignment="Center"></materialDesign:PackIcon>
<TextBlock Text="Git Hub" VerticalAlignment="Center" Margin="20 10"></TextBlock>
</StackPanel>
</ListViewItem>
</ListView>
</StackPanel>
</Grid>
</Grid>
Also i have Code Behind Given Below.
Private Sub ButtonPopoutLogout_Click(sender As Object, e As RoutedEventArgs)
Application.Current.Shutdown()
End Sub
Private Sub ButtonOpenMenu_Click(sender As Object, e As RoutedEventArgs)
ButtonOpenMenu.Visibility = Windows.Visibility.Collapsed
ButtonCloseMenu.Visibility = Windows.Visibility.Visible
End Sub
Private Sub ButtonCloseMenu_Click(sender As Object, e As RoutedEventArgs)
ButtonOpenMenu.Visibility = Windows.Visibility.Visible
ButtonCloseMenu.Visibility = Windows.Visibility.Collapsed
End Sub
waiting for +ve response. i will be thankful to you guys in advance because i am stuck in the task.
You are missing ( ) in when setting Storyboard.TargetProperty.
You can find out more about property path here.
Just change your storyboard to:
<Storyboard x:Key="MenuOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="60"></EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"></EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuClose">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="200"></EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"></EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

WPF Animation dependency issue

I just started to learn WPF and XAML and I tried to gete an animation sample to work on my machine. Basically, a label background should change when a specific value is set in the corresponding textbox.
Issue is I get the following error: Background' property does not point to a DependencyObject in path '(0).(1)
This is the XAML:
<Window x:Class="WpfDataBinding.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:loc="clr-namespace:WpfDataBinding"
Title="MainWindow" Height="350" Width="264.828">
<Window.Resources>
<DataTemplate DataType="{x:Type loc:Person}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="210"/>
</Grid.ColumnDefinitions>
<TextBlock Name="nameLabel" Grid.Row="0" Grid.Column="0" Text="Name:" FontSize="14" Margin="3,3,0,0"/>
<TextBox Name="nameTextBox" Grid.Row="0" Grid.Column="1" Width="200" Text="{Binding Name}" FontSize="14" Margin="3" />
<TextBlock Name="ageLabel" Grid.Row="1" Grid.Column="0" Text="Age:" FontSize="14" Margin="3,3,0,0"/>
<TextBox Name="ageTextBox" Grid.Row="1" Grid.Column="1" Width="200" Text="{Binding Age}" FontSize="14" Margin="3"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Age}" Value="21">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="ageLabel"
Storyboard.TargetProperty="(Label.Background).(SolidColorBrush.Color)"
To="Red" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<Grid Margin="0,0,0,-0.2" HorizontalAlignment="Left" Width="248">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox ItemsSource="{Binding}" />
<StackPanel Grid.Row="2" Grid.ColumnSpan="2">
<Button Content="_Show.." Click="Button_Click"/>
<Button Content="_Age" Click="Button_Click_1"/>
</StackPanel>
</Grid>
Thank you
In order to animate the Color property of a SolidColorBrush in the Background property of a UI Element, you need to first set the Background. The default value of the Background property of a TextBlock is null, so there is nothing to animate.
So, first set a Background before animating it:
<TextBlock ...>
<TextBlock.Background>
</SolidColorBrush Color="Transparent"/>
</TextBlock.Background>
</TextBlock>
Now your could write the TargetProperty path like
Storyboard.TargetProperty="Background.Color"
or
Storyboard.TargetProperty="(TextBlock.Background).Color"
or
Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)"
or even
Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
All expressions are equivalent. The details are explained in the PropertyPath XAML Syntax article on MSDN.
As per this question you need to use:
ColorAnimation Storyboard.TargetName="ageLabel"
Storyboard.TargetProperty="(TextBlock.Background).Color"
To="Red" Duration="0:0:1"/>
rather than (TextBlock.Background).(SolidColorBrush.Color) as apparently Background and SolidColorBrush are the same object.
(Label.Background).(SolidColorBrush.Color) line is the problem. It needs to be <ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ageLabel" />

Close popup from child button's press?

I have a Popup that contains a "close" button. The popup is opened by a toggle button (its IsOpen property is bound to a ToggleButton as provided by this answer). How can I close the popup when the button is pressed? This is my XAML:
<Canvas x:Name="LayoutRoot">
<ToggleButton x:Name="ToggleButton"
Style="{DynamicResource ToggleButtonStyle}" Height="51" Canvas.Left="2.999" Width="50.333" IsHitTestVisible="{Binding ElementName=Popup, Path=IsOpen, Mode=OneWay, Converter={StaticResource BoolInverter}}"/>
<Popup x:Name="Popup" IsOpen="{Binding IsChecked, ElementName=ToggleButton}" StaysOpen="False" AllowsTransparency="True">
<Canvas Height="550" Width="550">
<Grid Height="500" Width="500" Canvas.Left="25" Canvas.Top="25" d:LayoutOverrides="Width, Height, Margin">
<Grid.Effect>
<DropShadowEffect BlurRadius="15" ShadowDepth="0"/>
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition Height="0.132*"/>
<RowDefinition Height="0.868*"/>
</Grid.RowDefinitions>
<Rectangle x:Name="Background" Fill="#FFF4F4F5" Margin="0" Stroke="Black" RadiusX="6" RadiusY="6" Grid.RowSpan="2"/>
<Border x:Name="TitleBar" BorderThickness="1" Height="70" VerticalAlignment="Top" Margin="0,0.5,0,0" CornerRadius="5">
<DockPanel>
<TextBlock TextWrapping="Wrap" Text="FOOBAR POPUP TITLE" FontSize="24" FontFamily="Arial Narrow" Margin="17,0,0,0" d:LayoutOverrides="Height" VerticalAlignment="Center" FontWeight="Bold"/>
<Button x:Name="CloseButton" Content="Button" VerticalAlignment="Center" DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="0,0,13,0" Style="{DynamicResource CloseButtonStyle}"/>
</DockPanel>
</Border>
<Border BorderThickness="1" Height="413" Grid.Row="1" Background="#FF2F2F2F" Margin="12">
<Rectangle Fill="#FFF4F4F5" RadiusY="6" RadiusX="6" Stroke="Black" Margin="12"/>
</Border>
</Grid>
</Canvas>
</Popup>
</Canvas>
A better approach than code behind is to use an event trigger on the button click event:
<Button>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="ToggleButton">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Disclaimer: I haven't run this code through VS so it might have a typo or 2
Other answers didn't work for me, because I was using a DataTemplate for the buttons inside the popup. After lot's of searching I found that I should use Storyboard.Target instead of Storyboard.TargetName. Otherwise the x:Name was not found and there was some namespace exception.
<ToggleButton x:Name="MyToggleButtonName" Content="{Binding MyToggleButtonString}"/>
And later inside the Popup that has a ListBox which is populated from some ItemsSource:
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name, Mode=OneWay}"
Command="{StaticResource MyCommandThatTakesAParameter}"
CommandParameter="{Binding Name}">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsChecked" Storyboard.Target="{Binding ElementName=MyToggleButtonName}">
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
This way it is possible to get a somewhat working ComboBox which can execute commands with the buttons inside it. (A normal ComboBox can't launch commands for some odd reason.)
One way of doing it is to add event handler for your CloseButton:
<Button x:Name="CloseButton" Click="OnButtonClick" Content="Button" VerticalAlignment="Center" DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="0,0,13,0" Style="{DynamicResource CloseButtonStyle}"/>
And in OnButtonClick event handler set state of your
TuggleButton.IsChecked = false;
I have't tested code in VS, so there might be some typos

WPF keyboard navigation: How to expand a panel and put focus in the first control of that panel?

Kind of new to WPF and I am working on an app that has a general user input form and a "details" section that is hidden in an Expander. I am trying to get it so that if the user Tabs into the expander control it will automatically expand and put focus into the first control within that expander.
Some stripped down XAML:
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<Label Content="Email" Grid.Row="0" Grid.Column="0"/>
<TextBox Grid.Row="0" Grid.Column="1"/>
<Label Content="Department" Grid.Row="0" Grid.Column="2"/>
<TextBox Grid.Row="0" Grid.Column="3"/>
<Label Content="Contact Name" Grid.Row="1" Grid.Column="0"/>
<TextBox Grid.Row="1' Grid.Column="1"/>
<Label Content="Phone Number" Grid.Row="1" Grid.Column="2"/>
<TextBox Grid.Row="1" Grid.Column="3"/>
</Grid>
<Expander ExpandDirection="Down" IsExpanded="False" Header="Details">
<StackPanel Orientation="Horizontal">
<Label Content="Address"/>
<TextBox />
<Button Content="Add Another" />
</StackPanel>
</Expander>
</StackPanel>
What I would like to do is that if the user is currently entering in the Phone number and hits tab the Details Expander should expand and put focus into the Address's text box. I've tried setting TabIndex and playing with KeyboardNavigation.Tab... without any luck.
Any ideas how to do this?
Replace your Expander with following XAML using an EventTrigger and a Storyboard:
<Expander ExpandDirection="Down"
IsExpanded="False"
Header="Details">
<Expander.Style>
<Style>
<Style.Triggers>
<EventTrigger RoutedEvent="Expander.GotFocus">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetProperty="(Expander.IsExpanded)">
<DiscreteBooleanKeyFrame
KeyTime="00:00:01"
Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Expander.Style>
<StackPanel Orientation="Horizontal">
<Label Content="Address"/>
<TextBox />
<Button Content="Add Another" />
</StackPanel>
</Expander>
I don't think there is a pure Xaml approach for this. You may have to handle the expander's GotFocus event to 1) expand the expander, and 2) the call the Focus() method on the first control.

WPF Grid Show/Hide Column

I have the following layout in my grid
<Grid>
<Grid.RowDefinitions >
<RowDefinition Height="50" />
<RowDefinition />
</Grid.RowDefinitions>
<Button Click="Button_Click" Grid.Row="0" Width="50" Grid.Column="2" Content="Test" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="1" Background="red" />
<StackPanel Grid.Column="1" Grid.Row="1" Background="Blue" />
<GridSplitter x:Name="gs" Grid.Column="1" Grid.Row="1" Width="10" />
<StackPanel x:Name="green" MinWidth="100" Grid.Column="2" Grid.Row="1" Background="Green" />
</Grid>
</Grid>
I essentially want this layout when the button is pressed:
<StackPanel Grid.Column="0" Grid.Row="1" Background="red" />
<StackPanel Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Background="Blue" />
<!--<GridSplitter x:Name="gs" Grid.Column="1" Grid.Row="1" Width="10" />
<StackPanel x:Name="green" MinWidth="100" Grid.Column="2" Grid.Row="1" Background="Green" />-->
And this layout when the button is pressed again:
<StackPanel Grid.Column="0" Grid.Row="1" Background="red" />
<StackPanel Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Background="Blue" />
<GridSplitter x:Name="gs" Grid.Column="1" Grid.Row="1" Width="10" />
<StackPanel x:Name="green" MinWidth="100" Grid.Column="2" Grid.Row="1" Background="Green" />
How Can I make the gridsplitter and last panel disappear, and have the panel in the middle column fill it's place? (and vice-versa) Is there a way to change the column span at runtime?
Thanks!
You can use triggers or you can use a storyboard/animation the fires when you button is clicked.
you want to do something like this.....
<Window.Resources>
<Storyboard x:Key="OnClick1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="gs" Storyboard.TargetProperty="(FrameworkElement.Width)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="green" Storyboard.TargetProperty="(FrameworkElement.MinWidth)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
</Window.Triggers>
in order to reverse this animation, you should use something to maintain state, say use a ToggleButton and use the ToggleButton.Checked && ToggleButton.Unchecked routed events. Or, add a dependency property to your codebehind that maintains the state.
I think the main problem is remembering to change the MinWidth attribute as well. MinWidth will override actual width.

Resources