Develop Reference

Overlapping Transparent Views in a Prism Region

I was wondering if there is a way to show two overlapping transparent views in one named Region? My example below shows two overlapped transparent views in their own separate named region container in the first grid row. In the second grid row we have one named region "RegionC". The first registered view is the one that is displayed ("ViewA"). Am I correct that if we have multiple views registered to a region then we can only show one view at a time? Is there a way to show two overlapped views in one named Region? Or is it standard practice to add another content control to support multiple views shown? One reason why I want to do this is so I can better separate my XAML code in separate views and inject them into one region container as needed.
ShellWindow.xaml
<Window x:Class="PrismDemo.Views.ShellWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="150" Width="325" >
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" prism:RegionManager.RegionName="RegionA" />
<ContentControl Grid.Row="0" prism:RegionManager.RegionName="RegionB" />
<ContentControl Grid.Row="1" prism:RegionManager.RegionName="RegionC" />
</Grid>
ShellWindow.xaml.cs
using Prism.Regions;
using System.Windows;
namespace PrismDemo.Views
{
public partial class ShellWindow : Window
{
public ShellWindow(IRegionManager regionManager)
{
InitializeComponent();
regionManager.RegisterViewWithRegion("RegionA", typeof(ViewA));
regionManager.RegisterViewWithRegion("RegionB", typeof(ViewB));
regionManager.RegisterViewWithRegion("RegionC", typeof(ViewA));
regionManager.RegisterViewWithRegion("RegionC", typeof(ViewB));
}
}
}
ViewA.xaml
<UserControl x:Class="PrismDemo.Views.ViewA"
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:PrismDemo.Views"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="300">
<TextBlock Text="ViewA" FontSize="20" />
ViewB.xaml
<UserControl x:Class="PrismDemo.Views.ViewB"
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:PrismDemo.Views"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="300">
<TextBlock Text="ViewB" FontSize="30" />

You should use ItemsControl instead of ContentConrol for your region RegionC and set its ItemsPanel to Grid.
Here is the XAML:
<ItemsControl Grid.Row="1" prism:RegionManager.RegionName="RegionC">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

Am I correct that if we have multiple views registered to a region then we can only show one view at a time?
For regions in a ContentControl, yes, you are correct, because it can only have one Content at a time. But basically any control can host a region (provided you create an associated regionAdapter), for example, an ItemsControl or a TabControl can have multiple views inside them at the same time.
Is there a way to show two overlapped views in one named Region?
Yes, if you provide a RegionAdapter for a Grid, for example.
Or is it standard practice to add another content control to support multiple views shown?
Yes and no. Standard for multiple views in multiple regions, not standard for multiple views in the same region.

Why DataBinding is not propagating to UserControl

This morning I asked a question here and doing a simple working sample gave me a different behavior than expected.
Full working sample at GitHub. Main partial code below.
In this present case, the command is never propagated to any UserControl, either if the UserControl is use directly as a child of the Window. It also not work if the UserControl is used as a DataTemplate for a ListBox ItemTemplate.
I also include a hack button to fix the problem where the Command reach the UserControls. The hack come from StackOverflow.
But using the hack does not explain why UserControl does not receive the Command (without it) and using this hack also break the first rule of good coding: "Hi cohesion and Low coupling". The hack should be used in the the window code in order for it to manage the Command in the UserControl, my thought is that it should happen by default.
Why the command is not propagating by default to the UserControl and what should I do to propagate the command to the UserControl in a clean way?
Note: Using only one CommandBinding (removing one or the other) in the UserControl does not fix the problem .
Partial code:
<Window x:Class="CommandRoutingIntoItemTemplate.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:CommandRoutingIntoItemTemplate"
xmlns:system="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<local:UserControlTest></local:UserControlTest>
<ListBox Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Aqua" BorderThickness="2">
<local:UserControlTest></local:UserControlTest>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<system:String>1</system:String>
<system:String>2</system:String>
</ListBox.Items>
</ListBox>
<StackPanel Grid.Row="2" Orientation="Horizontal">
<Button Command="local:Commands.CommandTest">Put focus on TestBlock and click here to see if command occurs</Button>
<Button Click="AddHack">Hack</Button>
</StackPanel>
</Grid>
</Window>
UserControl:
<UserControl x:Class="CommandRoutingIntoItemTemplate.UserControlTest"
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:CommandRoutingIntoItemTemplate"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.CommandBindings>
<CommandBinding Command="local:Commands.CommandTest" CanExecute="CommandTestCanExecuteUserControl" Executed="CommandTestExecuteUserControl"></CommandBinding>
</UserControl.CommandBindings>
<Grid>
<TextBox Text="UserControlTest">
<TextBox.CommandBindings>
<CommandBinding Command="local:Commands.CommandTest" CanExecute="CommandTestCanExecuteTextBox" Executed="CommandTestExecuteTextBox"></CommandBinding>
</TextBox.CommandBindings>
</TextBox>
</Grid>
</UserControl>

The reason that you are not getting commands invoked on your user control is that your buttons are not in separate focus scope. For WPF to pick up focused element for command target correctly, it needs to be in separate focus scope from command invoking control.
Framework will just traverse up visual tree from button looking for command bindings in their focus scope (in your case it won't find any). When framework does not find any command bindings in current focus scope, only then it looks into parent focus scope for focused element (In your case, buttons are in Window focus scope which has no parent scope so the search will end there).
Simply setting FocusManager.IsFocusScope="True" on your StackPanel will fix the issue.
You could also specify CommandTarget property on your buttons to point to your user control and not rely on focus.

Syncfusion GridDataControl nested in a TabControl: Column auto-resizing broken after switching tabs

I am rather new to WPF. On .NET 3.5 using C# I want to build a WPF application including Syncfusion's GridDataControl in a TabItem. The GridDataControl is supposed to auto-resize by specifying the column width in multiples of '*'. This works fine after the first start of the app. But after switching tabs and again switching back resizing is broken and the grid control remains fixed in size. Here is my xaml code:
<Window x:Class="SyncfusionGridData.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SyncfusionGridData"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
mc:Ignorable="d"
Title="MainWindow" Height="500" Width="525" DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
<TabControl>
<TabItem Header="Tab1">
<Grid Name="layoutRoot">
<syncfusion:GridDataControl x:Name="dataGrid"
AutoPopulateColumns="False"
ShowAddNewRow="False"
ItemsSource="{Binding GDCSource}">
<syncfusion:GridDataControl.VisibleColumns>
<syncfusion:GridDataVisibleColumn Width="*"
HeaderText="ContactName"
MappingName="ContactName">
</syncfusion:GridDataVisibleColumn>
<syncfusion:GridDataVisibleColumn Width="*"
HeaderText="ContactTitle"
MappingName="ContactTitle">
</syncfusion:GridDataVisibleColumn>
</syncfusion:GridDataControl.VisibleColumns>
</syncfusion:GridDataControl>
</Grid>
</TabItem>
<TabItem Header="Tab2">
<Label Content="2" />
</TabItem>
</TabControl>
</Grid>
where 'GDCSource' is an ObservableCollection of 'Person' and 'Person' has the properties 'ContactName' and 'ContactTitle'.
I tried using Syncfusion's own tab control (TabControlExt) but this shows the same behaviour. Not specifying the ItemsSource property and displaying only the header row shows proper resizing.
I do not really have an idea what this might be related to. Thanks for any help!

AutoSizing fails as soon as the GridDataControl is Unloaded.
Add the following property to your TabControlExt to prevent Unloading of the Tabs after they have been loaded.
IsDisableUnloadTabItemExtContent="True"

Changing BackGround color of combobox when ItemsSource is set

I have a wpf c# app.
I am using a combo box and I set the ItemsSource to my Observable collection.
what I would like is the background of the combo box not to be grey.
This control is housed in a UserControl.
<UserControl x:Class="InformedWorkerClient.UserControls.ucJobStatus"
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:InformedWorkerClient.UserControls"
mc:Ignorable="d"
d:DesignHeight="27" d:DesignWidth="300" Background="White">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<ComboBox x:Name="cboJobStatus" Grid.Row="0" Grid.Column="0" Background="White"
DisplayMemberPath="Description"
SelectedValuePath="JobStatusRef"
SelectedValue="{Binding Path=JobStatus}" SelectionChanged="cboJobStatus_SelectionChanged" />
</Grid>
Additional:
This is what the background looks like after item is selected. I want the background to be white

You cannot do this due to a bug in the ControlTemplate for ComboBox.
Potential solution is to copy/edit the template and create your own.
This question is a duplicate. Perhaps the answer there can be updated with some more information. I searched for wpf cant change background of combobox and the top link is the MSDN answer on how to copy the template but even then the solution is riddled with issues with different Windows versions, aero theming, and does not address situations where users have high contrast turned on, and other accessibility issues.

I would recommend to use <ComboBox.ItemContainerStyle> and setup Background to Transparent for the container. Then each item background will be as in the ComboBox.

WPF put a group box in the middle or inside a user control

I got a user control named Palabok:
<UserControl x:Class="NeocClinic.WPFSystem.Templatas.Palabok"
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"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0"></Button>
</Grid>
</UserControl>
then I implement it to my WPF Window:
<Window x:Class="NeocClinic.WPFSystem.IrritantDetailsForm"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:windowsControls="clr-namespace:NeocClinic.WPFSystem.Templatas"
Title="IrritantDetailsForm" Height="300" Width="300">
<windowsControls:Palabok ></windowsControls:Palabok>
</Window>
My problem is I want to add a Group Box (with personalized components/controls of Irritants) to the Window that will be displayed in the Grid.Column="2" of the Palabok user control. Then I will use the same user control to another WPF window but put an Image control to the Grid.Column="2" instead of a Group Box, of the Palabok user control, but I can's seem to put the controls inside the Palabok user control.

I think your Control should inherit from ItemsControl
Please check : http://drwpf.com/blog/category/item-containers/