Close popup with child button?

Question

I have a Popup that contains a close button. A popup window opens with a toggle button (its IsOpen property IsOpen tied to ToggleButton , as provided by this answer ). How to close a popup when a button is clicked? 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> 

Answer 1

A better approach than the code is to use an event trigger in a 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 do not run this code through VS, so it may have a typo or 2

Answer 2

Other answers didn't help me because I used a DataTemplate for the buttons inside the popup. After a long search, I found that I should use Storyboard.Target instead of Storyboard.TargetName. Otherwise, the name x: Name was not found and there was some sort of namespace exception.

 <ToggleButton x:Name="MyToggleButtonName" Content="{Binding MyToggleButtonString}"/> 

And later, inside a popup that has a ListBox that 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> 

Thus, you can get a somewhat working ComboBox that can execute commands with buttons inside it. (A normal ComboBox cannot run commands for some odd reason.)

Answer 3

One way to do this is to add an 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 the OnButtonClick event handler your

TuggleButton.IsChecked = false;

I have not tested the code in VS, so there may be some typos