Develop Reference

Changing the ContentControl.Content stacks the content on top of each other

I have a MainWindow with a couple of radio buttons, a ContentControl and a button to change the content of ContentControl.
I also have a UserControl1 with a label on it. When I click the button on MainWindow to change the ContentControl.Content to UserControl1, it shows the label on top of the radio buttons I have from MainWindow. How can I change this so it acts like a page and does not stack each control on top of each other?
MainWindow.xaml:
<Window x:Class="Test.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:Test"
mc:Ignorable="d"
Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="540" Margin="0,10,-6,-19" Width="968">
<StackPanel Height="74" Margin="731,446,0,0" VerticalAlignment="Top" Width="229" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Content="Back" MinWidth="100" Margin="10,20,0,0"/>
<Button Content="Next" MinWidth="100" Margin="10,20,0,0" Click="NextBtnClick"/>
</StackPanel>
<RadioButton x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center" Margin="312,130,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
<RadioButton x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" Margin="312,232,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
<ContentControl x:Name="contentControl" Grid.Row="1"/>
</Grid>
</Window>
MainWindow.xaml.cs:
private void NextBtnClick(object sender, RoutedEventArgs e)
{
if (RadioBtn2.IsChecked == true)
{
this.contentControl.Content = new UserControl1();
}
}
After clicking the next button, I get the controls from UserControl1 stacked on top of the radio buttons.
I'm quite new to WPF so any help would be greatly appreciated. Navigating through the docs is a nightmare because I'm not sure how to tackle this problem.

You can trying to use Grid panel without defining rows and column definitions. As per your code, you are trying define the panel layout by hardcoded Margin, Width and Height. That's why contorls are rendered on top of each other.
I've changed the Grid code to define the Row Definitions so that controls are stacked on row basis. So when you click on Button the ContentContrl is loaded to last Row so (which is defined as Height="*" via RowDefinition to take the remaining space)
You can read about WPF Panels and Grid layout at internet. This can be a good start.
<Window x:Class="Test.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:Test"
mc:Ignorable="d"
Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10 10 10 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions?
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Content="Back" MinWidth="100" />
<Button Content="Next" MinWidth="100" Click="NextBtnClick"/>
</StackPanel>
<RadioButton Grid.Row="1" x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center" VerticalAlignment="Top" FontWeight="Bold" GroupName="1"/>
<RadioButton Grid.Row="2" x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" FontSize="48" FontWeight="Bold" GroupName="1"/>
<ContentControl x:Name="contentControl" Grid.Row="3"/>
</Grid>
</Window>

ScrollBar in WPF not displaying properly and getting over tabcontrol

So, when I create a new scrollbar the tab gets it. But when I scroll, it gets over the application menu too. I can't seem to find the solution and I tried everything.
My guess is that it's inside the dockpanel as well, but I don't know how to set it since if I added a new dockpanel it will say that "The property Content is set more than once."
Below you can see the code:
<Window
xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
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:ContabilitateMainWPF.Forms.Main"
xmlns:WPF="clr-namespace:ContabilitateMain.Controls.WPF" x:Class="ContabilitateMainWPF.Forms.Main.FrmMainRibbon"
mc:Ignorable="d"
Title="Main" Closing="Window_Closing" Loaded="Window_Loaded" WindowState="Maximized" Icon="/ContabilitateMain;component/Imagini/new_window-512.png" WindowStyle="ToolWindow">
<DockPanel LastChildFill="True">
<ribbon:Ribbon DockPanel.Dock="Top " Margin="0,-22,0,0">
<ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonApplicationMenu SmallImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\menu.png">
<ribbon:RibbonApplicationMenu.AuxiliaryPaneContent >
<StackPanel Orientation="Vertical" >
<GroupBox>
<Label Content="Ceva in group box" />
</GroupBox>
<StackPanel Orientation="Horizontal"/>
</StackPanel>
</ribbon:RibbonApplicationMenu.AuxiliaryPaneContent>
<ribbon:RibbonApplicationMenuItem x:Name="Salveaza" Header="Salveaza" />
</ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonTab x:Name="OptiuneaA" Header="Coloana A" MouseUp="OptiuneaA_MouseUp">
<ribbon:RibbonGroup x:Name="T1" Header="Optiunea 1">
<ribbon:RibbonButton x:Name="NouTab" Label="Tab PNG" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new_window-512.png" Click="NouTab_Click"/>
<ribbon:RibbonButton x:Name="AltNouTab" Label="Tab JPG" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new.jpg" Click="AltNouTab_Click"/>
</ribbon:RibbonGroup>
<ribbon:RibbonGroup x:Name="T2" Header="Optiunea 2">
<ribbon:RibbonButton x:Name="NouTab2" Label="Tab Nou" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new_window-512.png"/>
<ribbon:RibbonButton x:Name="AltNouTab2" Label="Tab Secund" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new.jpg"/>
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
<ribbon:RibbonTab x:Name="NouTab1" Header="Coloana B">
<ribbon:RibbonGroup x:Name="T3" Header="Optiunea 1">
<ribbon:RibbonButton x:Name="NouTab3" Label="Tab Nou" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new_window-512.png"/>
<ribbon:RibbonButton x:Name="AltNouTab3" Label="Tab Secund" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new.jpg"/>
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
</ribbon:Ribbon>
<TabControl x:Name="actionTabs" DockPanel.Dock="Right" Background="White" SelectionChanged="actionTabs_SelectionChanged" >
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="15" Width="100">
<TextBlock Width="80" Text="{Binding Header}"/>
<Image Source="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\close.png" Width="20" Height="20" MouseUp="Image_MouseUp"/>
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate x:Name="TabItem1">
<ScrollViewer>
<UserControl Content="{Binding Content}" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ScrollViewer>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</DockPanel>
I expected to show to scroll only the tab, but it scrolls all the screen.

So apparently, the bug was because I tried to add a scrollbar to a window form, which was called from <UserControl Content="{Binding Content}" which was inside the tabcontrol. For some reason they connected eachother. I fixed it by adding the Scrollviewer to the UserControl, which looked something like this:
`<UserControl x:Class="ContabilitateMainWPF.Controls.TestUserControl"
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:ContabilitateMainWPF.Controls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" SizeChanged="UserControl_SizeChanged">
<ScrollViewer>
<Grid x:Name="Grid">
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="199,0,0,0"/>
<Button x:Name="button_Copy" Content="Button" HorizontalAlignment="Left" Margin="141,91,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button_Copy1" Content="Button" HorizontalAlignment="Left" Margin="30,195,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button_Copy2" Content="Button" HorizontalAlignment="Left" Margin="199,261,0,0" VerticalAlignment="Top" Width="75"/>
<Label x:Name="label1" Content="LabelTest" HorizontalAlignment="Left" Margin="62,127,0,0" VerticalAlignment="Top"/>
</Grid>
</ScrollViewer>
</UserControl>`
Hope this helps someone one day.

WPF placing a Label at fixed location

I have a WPF window with a Pan and Zoomable Image. Now I want to have a Label that will display the zoom percentage at a fixed location in the window (eg. at center). The position should not be changed even if I Zoom or Pan the photo.
Here is the XAML of my window:
<Window x:Class="ImageViewer.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:ImageViewer"
Name="mainWindow"
mc:Ignorable="d"
Title="MainWindow" WindowStyle="None"
AllowsTransparency="True"
WindowStartupLocation="CenterScreen"
Height="600"
Width="900"
WindowState="Maximized">
<Window.Background>
<SolidColorBrush Opacity="0.5" Color="#FF3C3C6A"/>
</Window.Background>
<Grid>
<local:ZoomBorder x:Name="border" ClipToBounds="True">
<Image Name ="imageContainer"/>
</local:ZoomBorder>
</Grid> </Window>
Now I want to place the following Label in a way that its location never gets changed.
<Label Name ="ZoomLabel" Width="150" Height="50"
Content="100%" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="#FF383838" Foreground="#FFEAE4E4"
FontWeight="Bold" Opacity="0.75" FontSize="30"/>

You will want to add the label in the same row, column as the zoom border in the grid so that it overlays:
<Grid>
<local:ZoomBorder x:Name="border" ClipToBounds="True">
<Image Name ="imageContainer"/>
</local:ZoomBorder>
<Label Name ="ZoomLabel" Width="150" Height="50"
Content="100%" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="#FF383838" Foreground="#FFEAE4E4"
FontWeight="Bold" Opacity="0.75" FontSize="30"
Margin="10,10,0,0"
/>
</Grid> </Window>

C# WPF Control whose name I cannot find

I'm trying to make a few fields and put them inside some "Border".
However, I'm searching for something like the "Pet" border example in this picture:

It's called a GroupBox.
Here's a good example on how to use it:
<Window x:Class="WpfApplication9.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<GroupBox Header="Pizza" HorizontalAlignment="Left" Margin="10,10,0,0"
VerticalAlignment="Top" Height="236" Width="263">
<Grid HorizontalAlignment="Left" Height="226" VerticalAlignment="Top"
Width="253" Margin="0,0,-2,-12">
<Label Content="These are some pizza toppings."
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
<CheckBox Content="Cheese" HorizontalAlignment="Left"
Margin="10,41,0,0" VerticalAlignment="Top"/>
<CheckBox Content="Mushrooms" HorizontalAlignment="Left"
Margin="10,61,0,0" VerticalAlignment="Top"/>
<CheckBox Content="Olives" HorizontalAlignment="Left"
Margin="10,81,0,0" VerticalAlignment="Top"/>
</Grid>
</GroupBox>
</Grid>
</Window>
Taken from: http://www.dotnetperls.com/groupbox-wpf

This is what you search: GroupBox

Text orientation

I know you can do this to get vertical text in a tab header:
<Window x:Class="Abodemploy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TabControl Margin="0" Name="tabControl1" FlowDirection="LeftToRight" TabStripPlacement="Left">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock>Homes</TextBlock>
</StackPanel>
</TabItem.Header>
<TabItem.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90" />
</TransformGroup>
</TabItem.LayoutTransform>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
However the text letters are sideways. What I'd like (if possible) is for the letter orientation to be correct (ie upwards), but the text flow downwards, is this possible, or am I just dreaming the impossible dream?
Thanks Psy

I think the following post answers your question:
vertical-text-in-wpf-textblock
and I was able to get the desired result as follows:
XAML
<Window x:Class="Test.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TabControl Margin="0" Name="tabControl1" FlowDirection="LeftToRight" TabStripPlacement="Left">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock >
<ItemsControl x:Name="ic"></ItemsControl>
</TextBlock>
</StackPanel>
</TabItem.Header>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
And then set the ItemsSource of the ItemsControl to the string you want in the code behind.

Do you ask for this?
<TabItem.Header>
<StackPanel>
<TextBlock>H</TextBlock>
<TextBlock>o</TextBlock>
<TextBlock>m</TextBlock>
<TextBlock>e</TextBlock>
<TextBlock>s</TextBlock>
</StackPanel>
</TabItem.Header>