Develop Reference

WPF: Can't change property of custom control inside other control template (+Pictures)

Let's create an empty WPF project.
Add a very simple UserControl (i named it MyUserControl):
<UserControl x:Class="Delete_This_Test.MyUserControl"
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"
Background="Red"
Height="100">
<Grid>
</Grid>
</UserControl>
As you can see, i have changed only 2 properties: Background and Height to "Red" and "100".
Put our created control in MainWindow:
<Window x:Class="Delete_This_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:Delete_This_Test"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<local:MyUserControl Width="100"
Height="200"
Background="Blue">
</local:MyUserControl>
</Grid>
</Window>
Here, i have changed Width, Height and Background to "100", "200" and "Blue".
And it works: Without ControlTemplate Picture
But if we put MyUserControl in some ControlTemplate, for example of Button:
<Window x:Class="Delete_This_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:Delete_This_Test"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<local:MyUserControl Width="100"
Height="200"
Background="Blue">
</local:MyUserControl>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
This will not work. Only Width property will changed, because we didn't set it in MyUserControl xaml.
Height and Background will be the same as "100" and "Red":
With ControlTemplate Picture
So my question is: Is it bug of WPF, or i'm missing something obvious?
*
Because i need to use one custom control in different templates, and change some properties, e.g. Background of control

Grid Container resize with height and width specified - C# WPF Anchoring

When using Margins to specify top/left/bottom/right positions, the location of my button and inner grids is not what I expected with the following xaml:
<Window
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"
mc:Ignorable="d" x:Class="WpfApplication1.MainWindow"
Title="Dialog" WindowStartupLocation="CenterScreen" ResizeMode="CanResize" Height="399" Width="590">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 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:sys="clr-namespace:System;assembly=mscorlib" x:Name="TopÆLeftÆRight596" Background="#FFFFFF">
<Grid Margin="150, 85, 153, 110" x:Name="Panel597" Background="#EEEEEE">
<Button Margin="97,77,108,101" x:Name="BLANK_BUTTON598" ToolTip="Blank" Cursor="Arrow" FontFamily="Arial" FontSize="12" FontWeight="Normal" Foreground="#000000" Content="Blank" />
</Grid>
</Grid>
I believe what is happening is that because my container grid is set to stretch (x:Name="TopÆLeftÆRight596"), the margins are calculated off the window which includes the title bar. If I set height and width on that grid, resizing of the inner controls is no longer possible.
I need a way to specify the height/width values on the window, or perhaps another type of container, so that the margin calculations do not include the title bar, and the inner contents grow and shrink when the window is resized.
Please keep in mind I have no control over the left/top/right/bottom margin values provided.
In essence, what I'm trying to do is duplicate top/left/bottom/right anchoring of the Grid(x:Name="Panel597") and Button(x:Name="BLANK_BUTTON598") controls.
Any help is greatly appreciate. Thanks.

WPF page content not setting to window's size

I made a WPF application in which. I placed a rectangle. The page is covering whole window but the size(width) of rectangle is not equal to the page.
here is the pic.
here is the source code of my application:
<Page x:Class="TestWpfApplication.Page1"
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:TestWpfApplication"
mc:Ignorable="d"
d:DesignHeight="350" d:DesignWidth="525"
Title="Page1" Background="#FF7ACBBC" ShowsNavigationUI="False">
<Grid>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="525"/>
<Label x:Name="label" Content="Heading" HorizontalAlignment="Left" Margin="222.006,25,0,0" VerticalAlignment="Top" FontFamily="Tahoma" FontSize="22"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="160,155,0,0" TextWrapping="Wrap" Text="And rest of the content goes here" VerticalAlignment="Top" FontFamily="Tahoma" FontSize="14"/>
</Grid>
And
<Window x:Class="TestWpfApplication.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:TestWpfApplication"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:Page1/>
</Grid>
At last App.xaml
<Application x:Class="TestWpfApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestWpfApplication"
StartupUri="page1.xaml">
<Application.Resources>
</Application.Resources>
Please help me....

Set SizeToContent Property of Window to SizeToContent="WidthAndHeight"
SizeToContent

Page1.Xaml.cs:
public Page1()
{
InitializeComponent();
this.SizeToContent = SizeToContent.WidthAndHeight;
}
For more Info, See Window.SizeToContent Property

I don't know why you specified size parameters for rectangle and expect it to fit your page's size. Just remove all these parameters and it will stretch.
<Rectangle Fill="#FFF4F4F5"/>

Window in Window Dynamic Content

I am a little new to WPF.
I want to use one window for all my content, the content will vary dramatically and the Window.Resources content will need to vary also.
<Window x:Class="NS01.WPF01"
xmlns:b="clr-namespace:NS01"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:FluidKit.Showcase.ElementFlow"
xmlns:Controls="clr-namespace:FluidKit.Controls;assembly=FluidKit"
Loaded="Window_Loaded"
Title="NS01"
WindowStartupLocation="CenterScreen"
Width="1280"
Height="720"
WindowStyle="ThreeDBorderWindow">
<Window.Resources>
...
</Window.Resources>
<Grid>
...
</Grid>
</Window>
As an example, I would like to use some third party content like FluidKit's ElementFlow.
There are many good examples of how to dynamically Load UserControls, but nothing on Window in Window. The best I have found is: Changing content dynamically in wpf window
I would like to have multiple *.xaml Files in my project and load content dynamically into the Current Window.
EDIT:
I like WPF Frame, but I can not load and unload Window.Resources:
<Window x:Class="NS01.WPF01"
xmlns:b="clr-namespace:NS01"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:FluidKit.Showcase.ElementFlow"
xmlns:Controls="clr-namespace:FluidKit.Controls;assembly=FluidKit"
Loaded="Window_Loaded"
Title="NS01"
WindowStartupLocation="CenterScreen"
Width="1280"
Height="720"
WindowStyle="ThreeDBorderWindow">
<Window.Resources>
...
</Window.Resources>
<Frame Name="ContentHolder" />
</Window>
ContentHolder.Source = new Uri("/XAML/Repository/Page1.xaml", UriKind.Relative);
Just so you know, I have explored:
SolidColorBrush SolidColorBrushRed = new SolidColorBrush(Colors.Red);
this.Resources.Add("RedBrushResource", SolidColorBrushRed);
Is what I am wanting to do possible? Can I load all the required content from a single xaml File?
Thanks.
EDIT:
This is one method, but not really what I was wanting:
<Page x:Class="NS01.XAML.Repository.Page1"
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:NS01.XAML.Repository"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Page1">
<Grid>
<TextBlock Text="Welcome" FontSize="18" Foreground="{DynamicResource ResourceKey=textForeColorResource}" Margin="80,32,66,219"/>
</Grid>
</Page>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:NS01.XAML.Resources">
<SolidColorBrush x:Key="textForeColorResource" Color="Blue"/>
</ResourceDictionary>
ContentHolder.Source = new Uri("/XAML/Repository/Page1.xaml", UriKind.Relative);
ResourceDictionary RD = new ResourceDictionary()
{
Source = new Uri("/NS01;component/XAML/Resources/Page1.xaml", UriKind.RelativeOrAbsolute)
};
Application.Current.Resources.MergedDictionaries.Add(RD);
Application.Current.Resources.MergedDictionaries.Remove(RD);
foreach (var R in MWindow.Resources)
{
MessageBox.Show(R.ToString());
}

How to get WPF ContentControl content to stretch?

I'm using a ContentControl to render various UserControl derivations dynamically. I can't for the life of me figure out how to get the content to stretch when I resize the parent Window. I've found many references like this, but it's still not working for me. Here is a simple example:
This is the Window XAML:
<Window x:Class="WpfApplication3.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">
<Window.Resources>
<ResourceDictionary Source="Dictionary1.xaml"/>
</Window.Resources>
<Grid>
<ContentControl VerticalAlignment="Top"
HorizontalAlignment="Left"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Content="{Binding Path=ChildView}"
Margin="10"/>
</Grid>
</Window>
This uses the resource file Dictionary1.XAML:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModels ="clr-namespace:WpfApplication3"
xmlns:views ="clr-namespace:WpfApplication3">
<DataTemplate DataType="{x:Type viewModels:UserControlViewModel}">
<views:UserControl1/>
</DataTemplate>
</ResourceDictionary>
Here is the code behind for the main Window as well as the view model classes:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainViewModel();
}
}
public class MainViewModel
{
public UserControlViewModel ChildView { get; set; }
public MainViewModel()
{
ChildView = new UserControlViewModel();
}
}
public class UserControlViewModel
{
}
and finally the user control:
<UserControl x:Class="WpfApplication3.UserControl1"
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"
Background="Blue"
Height="141" Width="278"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid>
</Grid>
</UserControl>
Here's what it looks like at run time:
What am I missing here? How can I get the child content to behave such that it remains anchored to the top/left of the parent and the bottom/right stretches as the parent is resized?

Two things:
First, you want to remove the VerticalAlignment and HorizontalAlignment on your ContentControl. Setting these will prevent the content control from stretching within its container, so Width and Height are respected, which are both zero by default (so the container has no size on its own).
Setting VerticalAlignment and HorizontalAlignment to Stretch, or leaving it out since it’s the default, will make the container fill the grid, which is what you want.
<ContentControl Content="{Binding Path=ChildView}" Margin="10" />
Second, setting Width and Height within the UserControl will set its size to that fixed size, so it will not adjust itself. Remove those attributes and the user control will default to stretch too, making it fill the content control.
If you want to have a certain size for design purposes, then set the design size instead of the actual control size. For that, you have the d XAML namespace which contains DesignWidth and DesignHeight properties. Setting these will affect the designer but they are ignored later when the view is rendered.
<UserControl x:Class="WpfApplication3.UserControl1"
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:DesignWidth="400" d:DesignHeight="250"
Background="Blue">
…
</UserControl>

You set the Height and Width property of the UserControl. This removes any leeway the WPF layouting has. So it does the best thing it can, which is centering the UserControl. If you remove the width and height, it should stretch as you expect.
<UserControl x:Class="WpfApplication3.UserControl1"
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"
Background="Blue"
Height="141" Width="278" //<-- remove
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid>
</Grid>
</UserControl>
As poke kindly reminded me, you also have to remove VerticalAlignment="Top" and HorizontalAlignment="Left"
<ContentControl VerticalAlignment="Top" //<--remove
HorizontalAlignment="Left" //<--remove
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Content="{Binding Path=ChildView}"
Margin="10"/>