Home > front end >  WPF UserControl: Open another UserControl (Popup) when click on UserControl object
WPF UserControl: Open another UserControl (Popup) when click on UserControl object

Time:04-01

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();

CodePudding user response:

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>
  • Related