Develop Reference

UWP : how can I change UI from another XAML?

I have a UWP application:
My app command bar (XAML 2) manages TabView content (XAML 1). I need different command bars for different tab types. Now I using several frames in second XAML, and I can't change it from XAML 1.
How I can change XAML 2 UI from XAML 1 .cs file?
Thanks for any help.
UPD:
I have main XAML:
<Page
x:Class="Test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:NetChrom"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="BaseGrid">
<Grid.RowDefinitions>
<!-- titlebar -->
<RowDefinition x:Name="Titlebar" Height="30">
</RowDefinition>
<!-- toolbar -->
<RowDefinition x:Name="Toolbar" Height="110">
</RowDefinition>
<!-- main window -->
<RowDefinition>
</RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="TitlebarGrid" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<local:TitleBar/>
</Grid>
<Grid x:Name="ToolbarGrid" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="37*">
</ColumnDefinition>
<ColumnDefinition Width="27*"/>
</Grid.ColumnDefinitions>
<!-- toolbar -->
<local:Toolbar Grid.ColumnSpan="2"/>
</Grid>
<!-- content-->
<Grid x:Name="MainContent" Grid.Row="2" Background="AliceBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="325" MinWidth="120">
</ColumnDefinition>
<ColumnDefinition>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Background="#F3F3F3">
<local:MainTabbar/>
</Grid>
<Grid Grid.Column="0" Background="LightBlue">
<local:FileManager/>
</Grid>
<controls:GridSplitter
Margin="0,10,10,0"
Opacity="0"
Background="Transparent"
GripperCursor="Default"
HorizontalAlignment="Left"
Grid.Column="1"
ResizeDirection="Auto"
ResizeBehavior="BasedOnAlignment"
CursorBehavior="ChangeOnSplitterHover"
Width="0">
<controls:GridSplitter.RenderTransform>
<TranslateTransform X="-8" />
</controls:GridSplitter.RenderTransform>
</controls:GridSplitter>
</Grid>
</Grid>
</Page>
and in this XAML there are two another XAML: MainTabbar (XAML 1) and Toolbar (XAML 2) from scheme.
This is Toolbar.xaml:
<UserControl
x:Class="Test.Toolbar"
x:Name="toolbarControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:local="using:Test"
xmlns:met="using:Test.Method"
xmlns:chr="using:Test.ChrOptions"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
d:DesignHeight="110"
d:DesignWidth="1920">
<Border CornerRadius="0,0,10,10" BorderBrush="#D4D4D4" BorderThickness="1,0,1,1" Background="#F3F3F3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="110">
</RowDefinition>
</Grid.RowDefinitions>
<Grid x:Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition>
</ColumnDefinition>
<ColumnDefinition Width="320"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
</StackPanel>
</Grid>
<Grid Grid.Column="0">
<Frame x:Name="toolbarFrame"/> <!-- cmdbar frame>
</Grid>
</Grid>
</Grid>
</Border>
</UserControl>
This is MainTabbar:
<Page
x:Class="Test.MainTabbar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:met="using:Test.Method"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
d:DesignWidth="1595">
<Grid Margin="10,0,0,0">
<muxc:TabView x:Name="Tabs"
IsAddTabButtonVisible="False"
VerticalAlignment="Stretch"
TabCloseRequested="Tabs_TabCloseRequested"
AllowDropTabs="True"
CanDragTabs="False"
CanReorderTabs="True"
TabDroppedOutside="Tabs_TabDroppedOutside"
TabStripDragOver="Tabs_TabStripDragOver"
TabStripDrop="Tabs_TabStripDrop"
TabDragStarting="Tabs_TabDragStarting" >
<muxc:TabView.TabItems>
<muxc:TabViewItem Header="SampleMethod.met" IsClosable="False">
<muxc:TabViewItem.IconSource>
<muxc:SymbolIconSource Symbol="Placeholder" />
</muxc:TabViewItem.IconSource>
<!-- <Frame x:Name="MethodFrame"/> -->
<met:MethodTabView/>
</muxc:TabViewItem>
<muxc:TabViewItem Header="SampleChrome.chr" IsClosable="False">
<muxc:TabViewItem.IconSource>
<muxc:SymbolIconSource Symbol="Placeholder" />
</muxc:TabViewItem.IconSource>
<local:ChrView/>
</muxc:TabViewItem>
</muxc:TabView.TabItems>
<muxc:TabView.TabStripHeader>
<Grid x:Name="ShellTitlebarInset" Background="#F3F3F3" />
</muxc:TabView.TabStripHeader>
<muxc:TabView.TabStripFooter>
<Grid x:Name="CustomDragRegion" Background="#F3F3F3" />
</muxc:TabView.TabStripFooter>
</muxc:TabView>
</Grid>
</Page>
I need to get current tab type in MainTabbar.xaml.cs (it's ok). And then change Command Bar in Toolbar.xaml frame.
I wrote this procedure for change frame in Toolbar.xaml.cs:
public void setMetCmdbarMode()
{
toolbarFrame.Navigate(typeof(MethodToolbar), null);
}
But I don't know how I can call this function from MainTabbar class, or how I can translate tab type to Toolbar class.

After checking your code, you could try to create a custom event in the MainTabbar, and handle it in the MainPage. This event is triggered when the selected item of the TabView is changed. Then you could get notified in the MainPage and call method to change the Toolbar.
Here are the detailed steps:
Create a custom Event named TabItemChanged on the MainTabbar page and call it in the TabView_SelectionChanged event.
Handle the TabItemChanged in the MainPage
Change the content of the Toolbar as you want in the EventHandler based on the TabViewItem.
Code in MainTabbar:
public sealed partial class MainTabbar : Page
{
public event EventHandler TabItemChanged;
public MainTabbar()
{
this.InitializeComponent();
}
private void Tabs_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (this.TabItemChanged != null)
this.TabItemChanged(Tabs.SelectedItem, new EventArgs());
}
}
In the MainPage.Xaml
<local:MainTabbar TabItemChanged="MainTabbar_TabItemChanged"/>
In the MainPage.Xaml.cs
private void MainTabbar_TabItemChanged(object sender, EventArgs e)
{
MUXC.TabViewItem tabitem = sender as MUXC.TabViewItem;
switch (tabitem.Tag)
{
case "123":
Debug.WriteLine("FirstItemSelectecd");
//call method for toobar to change content
//like setMetCmdbarMode()
break;
case "234":
Debug.WriteLine("SecondItemSelectecd");
//call method for toobar to change content
//like setMetCmdbarMode()
break;
}
}
Update:
Give the toolbar a name in MainPage.Xaml
<local:Toolbar x:Name="myToolbar" Grid.ColumnSpan="2"/>
Then call it in the MainPage.Xam.cs:
switch (tabitem.Tag)
{
case "123":
Debug.WriteLine("FirstItemSelectecd");
myToolbar.setMetCmdbarMode();
break;
case "234":
Debug.WriteLine("SecondItemSelectecd");
break;
}

C# WPF Prism RegionManager failed to navigate

Using WPF .Net Core 3.1 + Prism.
I've implemented TabControl with dynamically added TabItems.
RegionManager works just fine when trying to navigate to region within MainWindow, but it failed when trying to navigate to region whithin the TabPage. Does not work neither from MainWindowViewModel, nor from TabPageViewModel.
Project's repo may be found here: GitHub.
MainWindow.xaml:
<TabControl Margin="10" ItemsSource="{Binding TabPages, UpdateSourceTrigger=PropertyChanged}">
<TabControl.Resources>
<DataTemplate DataType="{x:Type viewmodels:SomeTabPageViewModel}">
<views:SomeTabPage/>
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate DataType="{x:Type interfaces:ITabPage}" x:Name="dt">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="40">
<TextBlock Grid.Column="1" Margin="5,10,10,10" Text="{Binding TabName}" TextAlignment="Center" VerticalAlignment="Center" FontSize="16"/>
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
SomeTabPage.xaml:
<UserControl x:Class="WpfPrismRegionFailure.Views.SomeTabPage"
xmlns:prism="http://prismlibrary.com/"
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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Navigate From Inside Of TabPage (not working)" Command="{Binding NavigateFromInsideOfTabPageCommand}" FontSize="16" Background="Orange"/>
<TextBlock Grid.Row="1" Margin="10,20,0,0" Text="The area below contains region 'RegionInsideTabPage', but can't navigate to it." FontSize="16"/>
<Border Grid.Row="2" BorderBrush="Orange" BorderThickness="2" CornerRadius="10" Margin="10">
<ContentControl Margin="10" prism:RegionManager.RegionName="RegionInsideTabPage"/>
</Border>
</Grid>
</UserControl>
SomeTabPageViewModel.cs:
using Prism.Commands;
using Prism.Ioc;
using Prism.Regions;
using System.Windows.Input;
using WpfPrismRegionFailure.Base;
namespace WpfPrismRegionFailure.ViewModels
{
public class SomeTabPageViewModel : TabPageBase
{
public SomeTabPageViewModel(IContainerProvider containerProvider) : base(containerProvider)
{
this.NavigateFromInsideOfTabPageCommand = new DelegateCommand(OnNavigateFromInsideOfTabPage);
}
public SomeTabPageViewModel(IRegionManager regionManager) : base (regionManager)
{
this.NavigateFromInsideOfTabPageCommand = new DelegateCommand(OnNavigateFromInsideOfTabPage);
}
public ICommand NavigateFromInsideOfTabPageCommand { get; }
private void OnNavigateFromInsideOfTabPage()
{
System.Diagnostics.Trace.WriteLine($"SomeTabPageViewModel _regionManager ContainsRegionWithName RegionInsideTabPage: {this._regionManager.Regions.ContainsRegionWithName("RegionInsideTabPage")}");
this._regionManager.RequestNavigate("RegionInsideTabPage", "RegionContent");
}
}
}
Inside of TabPageViewModel regionManager.Regions.ContainsRegionWithName("RegionInsideTabPage") returns 'false' despite of the region is being declared in XAML
<ContentControl Margin="10" prism:RegionManager.RegionName="RegionInsideTabPage"/>
Project's repo may be found here: GitHub.
Someone heeeeeeelp me please

How to make a custom Pop Up Dialogue reuseable

So I created a custom Pop Up dialogue box in UWP, to make it reusable, i made use it of a User Control
<UserControl
x:Class="ContentDialogueBox.PopUpCustomDialogueUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ContentDialogueBox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<ContentDialog x:Name="MyContentDialogCustom"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Title="Lorem Ipsum"
PrimaryButtonText="OKxxx"
SecondaryButtonText="Canc"
Margin="0,0,-98,0" Width="1000" >
<Grid Background="Wheat">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Name" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox PlaceholderText="First Name" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10"/>
<TextBlock Text="Middle Name" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"/>
<TextBox PlaceholderText="Middle Name" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10"/>
<TextBlock Grid.Row="2" Text="Name" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox PlaceholderText="First Name" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10"/>
</Grid>
</ContentDialog>
</UserControl>
I was able to reference the user control in another page that contains the button named ButtonShowContentDialog4, what i want to achieve is display the PopUp Dialogue box, when i click the button in the page. Please how do i achieve this.
private void ButtonShowContentDialog4_Click(object sender, RoutedEventArgs e)
{
//show the PopUp here when this button is clicked
}

There are couple of ways to achieve that. Apart from the thing that you could have made a custom ContentDialog instead of putting it inside the user control, you can probably achieve your goal like this:
In your PopUpCustomDialogueUserControl class define a method that would show your popup:
public async Task ShowMyDialog() => await MyContentDialogCustom.ShowAsync();
Once you have it, add your PopUpCustomDialogueUserControl somwhere in your Page in xaml (remember to have a suitable namespace added (ContentDialogueBox) defined below as local) and add it a Name:
<local:PopUpCustomDialogueUserControl x:Name="MyCustomDialog"/>
Then you can call its method in code:
private async void ButtonShowContentDialog4_Click(object sender, RoutedEventArgs e)
{
await MyCustomDialog.ShowMyDialog();
}

How to create a base page that includes a common header for all pages extending that?

I'm very new to WPF application development.
I'm writing a simple WPF application in which I'll just have one window and pages will change on click buttons provided in UI.
Here how can have base page in which i'll add some header which is common for all pages i'm designing.
Is there anything like by extending that BasePage, all controls will come to this page?
For example, My app title should come in all page which I don't want to add in XAMLs of all pages.
Please let me know if my assumption itself is wrong.
Edited:
My BasePage:
public class BasePage : Page
{
public BasePage()
{
}
}
XAML of my HomePage:
<local:BasePage x:Class="CCS.ui.HomePage"
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:My.ui"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="HomePage">
<StackPanel>
<WrapPanel Name="root"></WrapPanel>
<Button Name="Home" Content="Home"></Button>
<Button Name="Home3" Content="Home2"></Button>
</StackPanel>
Here I'm not sure where to write controls of header which should be added to BasePage. Because if BasePage is created from XAML It is showing error like "Cannot use Pages generated from XAML".

There are several ways to do what you want. Here I put a small example:
I created a Window with 3 main controls, Menu (for navigation), TextBox (Header) and a Grid (Host)
When I click on the menu, I add a UserControl in the HostGrid.
MainWindow.xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Menu>
<MenuItem Header="Home" x:Name="Home" Click="MenuItem_Click"/>
<MenuItem Header="Page 1" x:Name="Page1" Click="MenuItem_Click"/>
<MenuItem Header="Page 2" x:Name="Page2" Click="MenuItem_Click"/>
</Menu>
<TextBlock Grid.Row="1" Text=" Header" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Height="40"/>
<Grid Grid.Row="2" x:Name="HostGrid"></Grid>
</Grid>
MainWindow.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
HostGrid.Children.Clear();
switch(((MenuItem)e.OriginalSource).Name)
{
case "Home":
HostGrid.Children.Add(new UserControlHome());
break;
case "Page1":
HostGrid.Children.Add(new UserControl1());
break;
case "Page2":
HostGrid.Children.Add(new UserControl2());
break;
}
}
}
UserControlHome.xaml
<Grid Background="Crimson">
<TextBlock Text="Home" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
UserControl1.xaml
<Grid Background="Lavender">
<TextBlock Text="Page 1" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
UserControl2.xaml
<Grid Background="Ivory">
<TextBlock Text="Page 2" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

set deledate in ItemsControl ResourceDictionary

First, let me show you how my code is cut.
I have this code in a xaml UC (eventsUC.xaml) :
<UserControl x:Class="QuimeO.UserControls.Lists.EventsListUC"
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:ToggleSwitch="clr-namespace:ToggleSwitch;assembly=ToggleSwitch"
mc:Ignorable="d"
Width="477"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Width="auto" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ItemsControl Grid.Row="0" BorderThickness="0" x:Name="eventsList" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ItemsControl.Resources>
<ResourceDictionary x:Name="eventslisttempplate" Source="EventsListTemplate.xaml" />
</ItemsControl.Resources>
</ItemsControl>
</ScrollViewer>...
My EventsListTemplate.xaml looks like this :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="QuimeO.UserControls.Lists.EventsListTemplate"
xmlns:apiNamespace="clr-namespace:QuimeO.DBO"
>
<DataTemplate DataType="{x:Type apiNamespace:EventsDictionary}">
<StackPanel Orientation="Vertical">
<Border BorderBrush="LightGray" BorderThickness="0,0,0,1" Margin="0,5,0,0">
<TextBlock HorizontalAlignment="Right" Foreground="Gray" Text="{Binding FormatedDate}" FontSize="14"></TextBlock>
</Border>
<ListView Grid.Row="0" x:Name="eventsList" ItemsSource="{Binding Events}" BorderThickness="0" MouseDoubleClick="eventsList_MouseDoubleClick">
</ListView>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
And my EventsListTemplate.xaml.cs code behind looks like this
public partial class EventsListTemplate : ResourceDictionary
{
public Delegate MainWindowControlPointer;
private void eventsList_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
var ev = ((sender as ListView).SelectedItem as ListViewItem).DataContext as Event;
System.Diagnostics.Debug.WriteLine(ev.Name);
this.MainWindowControlPointer.DynamicInvoke(ev.Ancestors.Root, new Element() { Category = ev.Category, Id = ev.Id, Name = ev.Name });
}
}
When I click on an item of my listview in my template, it trigger the eventsList_MouseDoubleCkick and I can retrieve my event.
However, I would like to trigger an action in the UC where the template is created (first source code block).
To do that, I just want to create a delegate in my Template (technicaly, in a perfect world, something like "this.rd_eventslisttemplate.MainWindowControlPointer = ... "). But, I don't know how to do it or if this is even possible.

After encrypting your question for a while I think I got it.
There is a nice method called VisualTreeHelper.GetParent() which gets you the parent of a control in VisualTree.
Now to your problem when you catch your event in EventsListTemplate you will need to call GetParent() few times till you finally get the instance of your UserControl.
Thats it.