Closing Popup after clicking child button using no code-behind - wpf

I have a wpf application with a toggle window which opens a popup control. I want to be able to close it after the user clicks it's child button.
My preference would be to do it in the xaml via style triggers. But for some reason I can't set my popup IsOpen property inside of the event trigger. I receive an error saying
A value of type setter cannot be added to a collection or dictionary of type TriggerActionCollection
here's how I have the xaml set up
<ToggleButton x:Name="ShowAvailableOptionsToggleButton"
Content="Add Options" />
<Popup IsOpen="{Binding IsChecked, ElementName=ShowAvailableOptionsToggleButton}">
<StackPanel>
<ListView ItemsSource="{Binding AvailableOptions}"
IsSynchronizedWithCurrentItem="True"
DisplayMemberPath="Name"/>
<Button Content="Add"
Name="AddOptionBtn"
Command="{Binding AddOptionCommand}"/>
</StackPanel>
<Popup.Style>
<Style>
<Style.Triggers>
<EventTrigger SourceName="AddOptionBtn" RoutedEvent="Button.Click">
//ERROR HAPPENS HERE
<Setter Property="IsOpen" Value="False"/>
</EventTrigger>
</Style.Triggers>
</Style>
</Popup.Style>
</Popup>
Can someone see what I am doing wrong?

EventTrigger has to be used with animations:
<Popup IsOpen="True">
<Button x:Name="AddOptionBtn"
Content="Add" />
<Popup.Triggers>
<EventTrigger SourceName="AddOptionBtn"
RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.Target="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Popup}}"
Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0"
Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Popup.Triggers>
</Popup>

Related

How to set DataContext of Button.ContextMenu same as the Button?

<Button Content="{Binding Type}" Name="Ellipsis" Tag="{Binding ElementName=Ellipsis, Path=DataContext}">
<Button.ContextMenu>
<ContextMenu x:Name="MainContextMenu" DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
<MenuItem Header="{Binding Type}"/>
</ContextMenu>
</Button.ContextMenu>
<Button.Triggers>
<EventTrigger SourceName="Ellipsis" RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainContextMenu" Storyboard.TargetProperty="(ContextMenu.IsOpen)">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
As shown above, Button.Content="{Binding Type}" works perfectly but when it goes in its ContextMenu, the DataContext changes which causing MenuItem Header="{Binding Type}" to not work. I researched online and someone said saving the outer DataContext in a tag and use it as the inner DataContext. I tried that in my code but ContextMenu still not reading the correct DataContext. The MenuItem Header should be the same as the Button.Content in this case but it is not. What should I do?
To answer the datacontext part of the question.
One way would be to ensure your contextmenu would have the same datacontext as a button would be to define the contextmenu as a resource.
<Grid.Resources>
<ContextMenu x:Key="MainContextMenu">
<MenuItem Header="{Binding Type}"/>
</ContextMenu>
</Grid.Resources>
<Button ContextMenu="{StaticResource MainContextMenu}"
Because the contextmenu is instantiated in the grid, it inherits the grid's datacontext.
The left click will not work without code though. Not with a button.
Not sure why you'd want left click to show a context menu but maybe you could consider a popup instead of contextmenu.
You could animate isopen using a booleananimation
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="MyPopup" Storyboard.TargetProperty="(Popup.IsOpen)">
<DiscreteBooleanKeyFrame Value="True" />
</BooleanAnimationUsingKeyFrames>
Or you could instead use a togglebutton which has an ischecked boolean:
<ToggleButton Content="{Binding Type}"
x:Name="Ellipsis" />
<Popup IsOpen="{Binding IsChecked, ElementName=Ellipsis, Mode=TwoWay}"
PlacementTarget="{Binding ElementName=Ellipsis}"
DataContext="{Binding DataContext, ElementName=Ellipsis}"
StaysOpen="False">
<ListBox>
<MenuItem Header="{Binding Type}"/>
</ListBox>
</Popup>
OK, probably needs a bit more work but my popup shows up and has the correct datacontext:

Expander getting stuck after IsExpanded set to true by storyboard

So I have an expander that I want to have the normal functionality (open and close with its own button) but I also want a different button to expand it when pressed (this button is in the header of the expander). I'm using a storyboard in an event trigger for the Button.Click which works, but after it is expanded this way the normal button doesn't work, it just stays expanded. My xaml is below, I would really prefer to keep this all in the xaml, I could come up with a way to do it in the codebehind/viewmodel myself.
<Expander x:Name="IndexExpander" IsExpanded="True" Grid.Row="4" Grid.ColumnSpan="5" Margin="10" MaxHeight="150">
<Expander.Triggers>
<EventTrigger SourceName="btnAddIndex" RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="IndexExpander" Storyboard.TargetProperty="IsExpanded" BeginTime="0:0:0.25" Duration="0:0:0.20" >
<DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Expander.Triggers>
<Expander.Header>
<StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
<TextBlock Text="Indexes" FontWeight="Bold"/>
<!-- Add/Delete Buttons-->
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="btnAddIndex" Command="{Binding AddIndexCommand}" Template="{StaticResource AddButtonTemplate}" IsEnabled="{Binding IsEditable}" Margin="0,0,5,0" />
</Grid>
</StackPanel>
</Expander.Header>
Alright, so for anyone following in my footsteps here's what I did. I got the idea from here, and adapted it until it worked correctly.
<Expander.Triggers>
<EventTrigger SourceName="btnAddCol" RoutedEvent="Button.Click">
<BeginStoryboard x:Name="ColumnExpanderStory">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="ColumnExpander" Storyboard.TargetProperty="IsExpanded">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.PreviewMouseUp">
<RemoveStoryboard BeginStoryboardName="ColumnExpanderStory" />
</EventTrigger>
</Expander.Triggers>
<Expander.Header>
The problem was that the storyboard overrides any other bindings to the IsExpanded property, so it has to be removed to restore them (read more here). The suggestion was to use the ToggleButton.Checked event to remove the storyboard, but that didn't work for me, only the "Preview" events seemed to have the right timing. I started with PreviewMouseDown, but it would remove the storyboard, then on mouse up toggle the expander, meaning the first click would just flip states back and forth quickly. Using PreviewMouseUp got around that issue.

Styling WPF Popup (like popups iTunes has)

I'm trying to create a popup that resembles what iTunes has when you click the arrow button or when you click the upnext button. can anyone help me style this in WPF? I could use some code samples, Thanks
<DataTemplate x:Key="popupStyle">
<Canvas>
<ToggleButton Content="test" IsChecked="{Binding IsPopupVisible, Mode=TwoWay}"/>
<AdornerDecorator Opacity="0" x:Name="adorner" Margin="20,0,0,0">
<AdornerDecorator.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="0"/>
</AdornerDecorator.Effect>
<Grid>
<Polygon Stroke="Silver" StrokeThickness="2" Fill="#AFFF" Points="0 10 20 0 150 0 150 150 20 150 20 20"/>
<StackPanel Margin="30,10,10,10">
<MenuItem Header="asfsd"/>
<MenuItem Header="asfsd"/>
<MenuItem Header="asfsd"/>
<MenuItem Header="asfsd"/>
</StackPanel>
</Grid>
</AdornerDecorator>
</Canvas>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsPopupVisible}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard Duration="0:0:0.3">
<DoubleAnimation
Storyboard.TargetName="adorner"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.3" To="1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard Duration="0:0:0.3">
<DoubleAnimation
Storyboard.TargetName="adorner"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.3" To="0"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
This DataTemplate is using a boolean variable in its ViewModel, named IsPopupVisible.
You can use the DataTemplate in a Window like below:
<Window... MouseDown="Window_MouseDown">
<Window.Resources>
<DataTemplate x:Key="popupStyle">
...
</DataTemplate>
</Window.Resources>
<ContentPresenter ContentTemplate="{StaticResource popupStyle}" Content="{Binding}"/>
</Window>
and add the mouseDown event to the whole Window:
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
IsPopupVisible = false;
}
so that when user clicks anywhere else, popup goes hidden.

WPF Visibility animation trigger problems

I have two stackpanels, where the second panel is extra information that can be slided down and shown when clicking on a button (like jQuerys slideDown effect). And afterwards be slided up, when clicking the button again.
I´ve never been fiddling with animations before, but have been doing some research. I´m still quite confused though, and cant figure out this simple problem.
When I only listen on the Visibility=Visible property, it works fine. But when I also want to slide the panel up, it behaves weird.
This is my XAML code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Width="600" Orientation="Horizontal">
<TextBlock Style="{StaticResource Heading4}">Panel 1</TextBlock>
<Button Width="300" Margin="30,0,0,0" Click="Button_OnClick">Click to slide other panel down</Button>
</StackPanel>
<StackPanel Name="StackPanelShowHide" Grid.Row="1" Width="500" Orientation="Vertical" Background="Beige" Height="70">
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="70" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Visibility" Value="Collapsed">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="70" To="0" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<TextBlock Style="{StaticResource Heading4}">New panel</TextBlock>
</StackPanel>
</Grid>
And this is my Codebehind:
private void Button_OnClick(object Sender, RoutedEventArgs E) {
if (StackPanelShowHide.Visibility == Visibility.Collapsed) {
StackPanelShowHide.Visibility = Visibility.Visible;
} else {
StackPanelShowHide.Visibility = Visibility.Collapsed;
}
}
Really hope you can help :)
Kind regards,
Lars
I guess that instead of slide up animation on collapse it just instantly disappears. This is because you set Visibility to Collapsed, so there is nothing to display.
To fix this:
a) use MVVM: add some property to ViewModel and trigger on it. Modify property via ICommand.
b) Do not set Visibility, just start proper Storyboard in event handler.
I believe that your problem is that when the StackPanel has a Visibility value of Collapsed, it is removed from the UI. Therefore, even if the Animation were to occur, you would not see it.

Closing ContextMenu with Templated MenuItems

I have created a customized Context menu where I changed the appearance of all items.
These Items contain different controls like comboboxes and buttons. Now I want the menu to close if a button was pressed or a combobox item was selected. Currently the menu just remains open.
Can you give me a hint?
This is a simplified code to show what I did:
<ContextMenu StaysOpen="False">
<MenuItem>
<MenuItem.Template>
<ControlTemplate>
<Grid MinWidth="200">
<Button Command="{Binding SomeWorkingCommandBinding}">OK</Button>
</Grid>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
</ContextMenu>
As mentioned, I would like to close the menu when I hit that OK button.
UPDATE
The following button (or any other control) does the trick without the need of Blend SDK:
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContextMenu.IsOpen)" Storyboard.Target="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ContextMenu}}">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>False</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
Use the ChangePropertyAction which is part of the Blend SDK to change the IsOpen property of the ContextMenu as soon as the Button is clicked:
<ContextMenu x:Name="MyContextMenu">
<MenuItem>
<MenuItem.Template>
<ControlTemplate>
<Grid MinWidth="200">
<Button Command="{Binding SomeWorkingCommandBinding}" Content="OK">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction TargetObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ContextMenu}}" PropertyName="IsOpen" Value="False"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
</ContextMenu>
You'll need the following namespaces:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"

Resources