WPF UserControl: Open another UserControl (Popup) when click on UserControl object - wpf

Question

I have built a button wrapper around the User Control (FFU), so the object is clickable trough the main window. When the FFU object is clicked, I want to open another User Control: Popup FFU to be opened.
Main window XAML
<vw:BaseWindow
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vw="http://inosoft.com/visiwin7"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:UserControls="clr-namespace:HMI.Windows.UserControls" x:Class="HMI.MainWindow"
mc:Ignorable="d"
ResizeMode="NoResize"
WindowStyle="None" WindowState="Normal" WindowStartupLocation="CenterScreen"
Width="1024" Height="768">
<Grid x:Name="LayoutRoot" UseLayoutRounding="True">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="80" />
</Grid.RowDefinitions>
<vw:Region x:Name="MainRegion" StartView="MainView1" DesignTimeView="MainView1" Grid.Row="0" Margin="0,96,0,4" Grid.RowSpan="2" />
<vw:Region x:Name="HeaderRegion" StartView="HeaderView" DesignTimeView="HeaderView" Grid.Row="0" />
<vw:Region x:Name="FooterRegion" StartView="FooterView" DesignTimeView="FooterView" Grid.Row="2" />
<UserControls:UC_FFU x:Name="FFU_1" HorizontalAlignment="Left" Height="28" Margin="305,85,0,0" Grid.Row="1" VerticalAlignment="Top" Width="44"/>
<UserControls:UC_FFU x:Name="FFU_2" HorizontalAlignment="Left" Height="29" Margin="358,85,0,0" Grid.Row="1" VerticalAlignment="Top" Width="44"/>
<UserControls:UC_FFU x:Name="FFU_3" HorizontalAlignment="Left" Height="29" Margin="410,85,0,0" Grid.Row="1" VerticalAlignment="Top" Width="44" StateBrush="{vw:VariableBinding VariableName=MCS1.Cleanroom.SIM_Cleanroom.SIM_FFUControl1.Observers.oStatus, Converter={StaticResource ValueToStateBrushConverter}, States={StaticResource BrushListStatus}, StateMode=Value}" PopupFFUInstance="{Binding MyDataContextPopupFFUProperty}"/>
</Grid>
</vw:BaseWindow>
UserControl code XAML
<UserControl x:Class="HMI.Windows.UserControls.UC_FFU"
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:HMI.Windows.UserControls"
mc:Ignorable="d"
x:Name="_this" d:DesignWidth="42" Height="27.544">
<Button x:Name="Btn" IsHitTestVisible="{Binding ElementName=Popup, Path=IsOpen, Mode=OneWay}" Click="Btn_Click">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="19*"/>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="{Binding ElementName=_this, Path=StateBrush}" Width="40" Height="24" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1,1,0,0" Grid.ColumnSpan="6"/>
<Line Stroke="#FF000000" Height="24" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1,1,0,0" Width="0" Y1="0" Y2="24" X1 ="-.5" X2="-.5"/>
<Line Stroke="#FF000000" Width="40" HorizontalAlignment="Left" VerticalAlignment="Top" Margin=".5,25,-2,0" Width="43" Y1="0" Y2="0.114682539682633" X2="40.5" Grid.ColumnSpan="6"/>
<Line Stroke="#FF000000" Height="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1,1,-2,0" Width="43" Y1="0" Y2="0.114682539682633" X2="39.5" Grid.ColumnSpan="6"/>
</Grid>
<Button.Template>
<ControlTemplate x:Name="BlankButtonTemplate" TargetType="{x:Type ButtonBase}">
<Border Background="#00000000">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</UserControl>
UserControl FFU backhand
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace HMI.Windows.UserControls
{
/// <summary>
/// Interaction logic for UC_FFU.xaml
/// </summary>
public partial class UC_FFU : UserControl
{
//Create PopupFFUProperty
public static readonly DependencyProperty PopupFFUProperty =
DependencyProperty.Register("PopupFFUInstance", typeof(int), typeof(UC_FFU));
public int PopupFFUInstance
{
get { return (int)GetValue(PopupFFUProperty); }
set { SetValue(PopupFFUProperty, value); }
}
public UC_FFU()
{
InitializeComponent();
}
//Added the Click Event
public event RoutedEventHandler Click
{
add { Btn.AddHandler(ButtonBase.ClickEvent, value); }
remove { Btn.AddHandler(ButtonBase.ClickEvent, value); }
}
private void Btn_Click(object sender, RoutedEventArgs e)
{
// Something to open the UserControl FFU Popup....
}
}
}
Simple Pop up example FFU XAML
<UserControl x:Class="HMI.Windows.UserControls.PopupControl.Popup_FFU"
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:HMI.Windows.UserControls.PopupControl"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="50">
<Popup IsOpen="{Binding IsChecked, ElementName=button}" StaysOpen="False">
<Border Background="LightYellow">
<TextBlock>I'm the popup</TextBlock>
</Border>
</Popup>
</UserControl>
How can this be achieved?
I have tried to open a new window like this: however it should be a popup. Not a dialog window.
Window window = new Window
{
Title = "My User Control Dialog",
Content = new PopupControl.Popup_FFU()
};
window.Show();

Answer 1

This is what I would change in your code.
UC_FFU.xaml: Put this before your closing </Grid>
<Popup x:Name="ButtonPopup" StaysOpen="False">
<UserControls:Popup_FFU />
</Popup>
UC_FFU.xaml.cs:
private void Btn_Click(object sender, RoutedEventArgs e)
{
ButtonPopup.IsOpen = true;
}
Popup_FFU.xaml:
<UserControl x:Class="HMI.Windows.UserControls.PopupControl.Popup_FFU"
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:HMI.Windows.UserControls.PopupControl"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="50">
<Border Background="LightYellow">
<TextBlock>I'm the popup</TextBlock>
</Border>
</UserControl>