I've got this Code in Silverlight 4:
<Grid>
<Grid.RowDefinitions >
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<Button Height="25" Width="25">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="200" Duration="00:00:00.5" Storyboard.TargetName="BigMenu" Storyboard.TargetProperty="Width"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
<Image Source="../ResX/expand.png"/>
</Button>
<Button Height="25" Width="25">
<Image Source="../ResX/pin.png"/>
</Button>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1">
<Button Height="25" Width="25" Margin="0,10,0,5" Click="bSelf_Click">
<Image Source="../ResX/selfass.png"/>
<ToolTipService.ToolTip>
<ToolTip Content="Selbsteinschätzung" />
</ToolTipService.ToolTip>
</Button>
<Button Height="25" Width="25" Margin="0,5,0,5" Click="bforeign_Click">
<Image Source="../ResX/extass.png"/>
<ToolTipService.ToolTip>
<ToolTip Content="Fremdeinschätzung"/>
</ToolTipService.ToolTip>
</Button>
<Button Height="25" Width="25" Margin="0,5,0,5" Click="bSearch_Click">
<Image Source="../ResX/search.png"/>
<ToolTipService.ToolTip>
<ToolTip Content="Suche" />
</ToolTipService.ToolTip>
</Button>
<Button Height="25" Width="25" Margin="0,5,0,10" Click="bAdministration_Click">
<Image Source="../ResX/admin.png"/>
<ToolTipService.ToolTip>
<ToolTip Content="Administration"/>
</ToolTipService.ToolTip>
</Button>
</StackPanel>
<StackPanel Grid.Row="1" x:Name="BigMenu">
</StackPanel>
</Grid>
So on Initializing i've got this Error thrown:
XAMLParseException occured. Fehler beim Zuweisen zu Eigenschaft
'System.Windows.EventTrigger.RoutedEvent'. [Line: 22 Position: 47]
Which is this:
<EventTrigger RoutedEvent="Button.Click">
I ain't see any Error on this Code.
I Would appriciate any help.
Best regards
According to the MSDN documentation for EventTrigger:
In Silverlight, the only event that you can use for an EventTrigger is the Loaded event.
The error is because you're using an event other than Loaded (i.e. Button.Click) with an EventTrigger.
Related
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>
I am learning wpf and xaml. And I want to disable the showing of date picker when cancil button is clicked. How can I achieve that in XAML using style. So when the red cancil button is clicked I want to hide or disable the date picker. Please help me.
Below is what I have till now
<UserControl x:Class="ucWorkOrderActivity"
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"
mc:Ignorable="d" Height="74" Width="570" Background="White" BorderBrush="Gray" BorderThickness="1" Loaded="UserControl_Loaded" MouseDoubleClick="UserControl_MouseDoubleClick">
<Grid>
<DockPanel Name="dkpControl" Margin="10,0,25,0" >
<StackPanel Name="stpMoveButtons" Orientation="Vertical" DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="5,0,0,0">
<Button Name="btnUp" Click="btnUp_Click" Height="25" Width="25" Content="▲" ToolTip="Move Action Up" IsEnabled="{Binding Path=IsUpEnabled}" Margin="0,5,5,10" />
<Button Name="btnDown" Click="btnDown_Click" Height="25" Width="25" Content="▼" ToolTip="Move Action Down" Margin="0,0,5,10" IsEnabled="{Binding Path=IsDownEnabled}" />
</StackPanel>
<DockPanel DockPanel.Dock="Top" Margin="0,0,5,0" >
<TextBlock Name="txbDesc" Text="{Binding Path=Description}" Width="150" TextTrimming="CharacterEllipsis" Margin="10,5,5,5" VerticalAlignment="Top" />
<DockPanel Margin="5,0" HorizontalAlignment="Right" DockPanel.Dock="Right" Width="358" >
<TextBlock Name="txbCostLabel" Text="Cost: " DockPanel.Dock="Left" VerticalAlignment="Top" Margin="46,5,0,5" />
<TextBlock Name="txbCost" Text="{Binding Path=AmountCharged}" TextAlignment="Right" DockPanel.Dock="Left" Width="50" Margin="5" VerticalAlignment="Top" />
<DatePicker Name="dtpCompleted" DockPanel.Dock="Right" Height="25" VerticalAlignment="Top" Margin="0,1,0,0" SelectedDate="{Binding Path=EndDate}" Width="90" />
<TextBlock Name="txbStatus" Text="{Binding Path=Status}" DockPanel.Dock="right" HorizontalAlignment="Left" Width="60" Margin="45,5,30,5" TextAlignment="Left" VerticalAlignment="Top" />
</DockPanel>
</DockPanel>
<DockPanel DockPanel.Dock="Bottom" Margin="0,0,5,0" >
<Image Name="imgLocationChange" Margin="25,0" DockPanel.Dock="Left" Height="24" Source="/SMS_Main;component/Resources/UnitMoveLoc_24.png" Visibility="Hidden" />
<TextBlock Name="txbCharge" Text="{Binding Path=ChargeWhen}" Margin="70,0,0,0" VerticalAlignment="Center" />
<Button Name="btnComplete" Height="26" Width="26" DockPanel.Dock="Right" HorizontalAlignment="Right" Click="btnComplete_Click" ToolTip="Complete Action" >
<Image Source="/SMS_Main;component/Resources/OK_24.png" Margin="2" />
</Button>
<Button Name="btnCancel" Height="26" Width="26" DockPanel.Dock="Right" HorizontalAlignment="Right" Click="btnCancel_Click" ToolTip="Remove Action">
<Image Source="/SMS_Main;component/Resources/Cancel_24.png" Margin="2" />
</Button>
<Button Name="btnRevert" Height="26" Width="26" DockPanel.Dock="Right" HorizontalAlignment="Right" Click="btnRevert_Click" IsEnabled="{Binding Path=CurrentlySaved}" ToolTip="Revert Change">
<Image Source="/SMS_Main;component/Resources/Undo_24.png" Margin="2" />
</Button>
<Button Name="btnEdit" Height="26" Width="26" DockPanel.Dock="Right" HorizontalAlignment="Right" Click="btnEdit_Click" ToolTip="Edit Action" >
<Image Margin="2" Source="/SMS_Main;component/Resources/Config_24.png" />
</Button>
<TextBlock Name="txbAssignedTo" Text="{Binding Path=AssignedUser}" VerticalAlignment="Center" DockPanel.Dock="Right" HorizontalAlignment="Left" Margin="95,0,10,0" />
</DockPanel>
</DockPanel>
</Grid>
</UserControl>
.
You can add an event trigger to the cancel button:
<Button Name="btnCancel" Height="26" Width="26" DockPanel.Dock="Right" HorizontalAlignment="Right" ToolTip="Remove Action" Content="Cancel">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="dtpCompleted">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
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
I have the following XAML, in which there are three group boxes stacked. In the header of those groupboxes are checkboxes.
What I'd like to achieve : when I check/uncheck a box, I'd like the corresponding groupbox to slowly expand/collapse, with a smooth animation.
I'm trying this in Blend 4 but am quite a newbie. Any help on how to achieve this ? In particular, can the animation be self-contained in the XAML ?
UPDATE : This seems to come close , but I don't quite get it
<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="WpfControlLibrary1.MainControl"
x:Name="MultiVol">
<StackPanel x:Name="LayoutRoot" HorizontalAlignment="Stretch">
<GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
<GroupBox.Header>
<WrapPanel>
<CheckBox IsChecked="True" VerticalAlignment="Center" />
<Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />
</WrapPanel>
</GroupBox.Header>
<UniformGrid Columns="2">
<Label Content="Spots"></Label>
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Hist. references" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Tenors" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
</UniformGrid>
</GroupBox>
<GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
<GroupBox.Header>
<WrapPanel>
<CheckBox IsChecked="True" VerticalAlignment="Center" />
<Label Content="Skew" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />
</WrapPanel>
</GroupBox.Header>
<UniformGrid Columns="2">
<Label Content="Spot Intervals"></Label>
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Hist. references" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Tenors" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Compute 'Power'" />
<CheckBox IsChecked="False" VerticalAlignment="Center"/>
</UniformGrid>
</GroupBox>
<GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
<GroupBox.Header>
<WrapPanel>
<CheckBox IsChecked="True" VerticalAlignment="Center" />
<Label Content="Term structure" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />
</WrapPanel>
</GroupBox.Header>
<UniformGrid Columns="2">
<Label Content="Spots" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Tenors" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
</UniformGrid>
</GroupBox>
</StackPanel>
</UserControl>
Just edited the first group box in your simple code:
<GroupBox Margin="8,0" BorderBrush="#FF88B1D8" Height="150">
<GroupBox.Resources>
<Style TargetType="GroupBox">
<Style.Triggers>
<EventTrigger RoutedEvent="CheckBox.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" To="30" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="CheckBox.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</GroupBox.Resources>
<GroupBox.Header>
<WrapPanel>
<CheckBox IsChecked="True" VerticalAlignment="Center" />
<Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" />
</WrapPanel>
</GroupBox.Header>
<UniformGrid Columns="2">
<Label Content="Spots"></Label>
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Hist. references" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Tenors" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
</UniformGrid>
</GroupBox>
If you want to have this on a single group box you could place the Style Element inside this code
<GroupBox.Resources>
<!--Style Inside HEre-->
</GroupBox.Resources>
to implement it on a single group box.
Another suggestion is created a Style inside the stack panel and add a key to it:
<StackPanel.Resources>
<Style TargetType="GroupBox" x:Key="groupBoxStyle">
<Style.Triggers>
<EventTrigger RoutedEvent="CheckBox.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" To="30" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="CheckBox.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
then attached it to the style of the groupbox:
<GroupBox Margin="8,0" Height="150" BorderBrush="Transparent" Style="{StaticResource groupBoxStyle}">
<GroupBox.Header>
<WrapPanel>
<CheckBox IsChecked="True" VerticalAlignment="Center" />
<Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" />
</WrapPanel>
</GroupBox.Header>
<Border BorderBrush="Black" BorderThickness="2">
<UniformGrid Columns="2">
<Label Content="Spots"></Label>
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Hist. references" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Tenors" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
</UniformGrid>
</Border>
</GroupBox>
this approach will be more useful when you want to implement this on the future to multiple groupboxes
In Case you want to handle the checkbox and unchecked event you could use this code
<GroupBox Margin="8,0" Height="150" BorderBrush="Transparent" Style="{StaticResource groupBoxStyle}" CheckBox.Checked="CheckBox_Checked" CheckBox.Unchecked="CheckBox_Unchecked">
<GroupBox.Header>
<WrapPanel>
<CheckBox x:Name="chkHeader" IsChecked="True" VerticalAlignment="Center" />
<Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" />
</WrapPanel>
</GroupBox.Header>
<Border BorderBrush="Black" BorderThickness="2">
<UniformGrid Columns="2">
<Label Content="Spots"></Label>
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Hist. references" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Tenors" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
</UniformGrid>
</Border>
</GroupBox>
and add this in the code behind:
private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
if ((e.OriginalSource as CheckBox).Name != "chkHeader")
{
e.Handled = true;
}
}
private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
{
if ((e.OriginalSource as CheckBox).Name != "chkHeader")
{
e.Handled = true;
}
}
You probably should use an Expander for this (that's what they are for) and animate that.
If you don't like the look re-template them, you can make them look like a group-box.
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.