WPF: Is VerticalAlignment inherited by nested containers? - wpf

I'd like to have the nested containers inherit that property, but when I set it in the outermost one I'm not sure if it's working. It either is working but I'm not getting the results I want, or maybe I'd have to set up a property somewhere for it to carry.
Assuming that a) it is possible to do it and b) I'd have to change a property somewhere, would that have any side effects I should be aware of?
EDIT
Ok, here's an example:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Width="300" Height="100">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0">Text</Label>
<TextBox Grid.Row="0" Grid.Column="1">I'm on the Internet</TextBox>
<Button Grid.Row="0" Grid.Column="2">Don't click me</Button>
<Label Grid.Row="1" Grid.Column="0">Text2</Label>
<Slider Grid.Row="1" Grid.Column="1"></Slider>
<Button Grid.Row="1" Grid.Column="2">Click the other guy</Button>
</Grid>
</Window>
What I would like to have, without having to do it manually:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Width="300" Height="100">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">Text</Label>
<TextBox VerticalAlignment="Center" Grid.Row="0" Grid.Column="1">I'm on the Internet</TextBox>
<Button VerticalAlignment="Center" Grid.Row="0" Grid.Column="2">Don't click me</Button>
<Label VerticalAlignment="Center" Grid.Row="1" Grid.Column="0">Text2</Label>
<Slider VerticalAlignment="Center" Grid.Row="1" Grid.Column="1"></Slider>
<Button VerticalAlignment="Center" Grid.Row="1" Grid.Column="2">Click the other guy</Button>
</Grid>
</Window>
Although I'm not really sure there was any difference here. It's not a deal breaker or anything, but I'd like to do it this way.

VisualTree inheritance is not universal. The dependency property specifies that it will inherit down the visual tree when it is declared. In this case, verticalalignment is not.
The only way to get a consistent vertical alignment is to use a style. And you can't use an implicit style across different types of controls. So you need to create a named style, place it in the resources of the container. Add a setter to the style to set the vertical alignment to whichever value you want. Finally reference the style in all the controls to which you want it applied.
Here is your example done with styles...unfortunately you're not saving much typing however if your style did something like Set VerticalAlignment and the FontFamily, then you're saving space...If you think of it like CSS then WPF Styles are easy.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Width="300" Height="100">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style x:Key="setVA" TargetType="{x:Type Control}">
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</Grid.Resources>
<Label Style="{StaticResource setVA}" Grid.Row="0" Grid.Column="0">Text</Label>
<TextBox Style="{StaticResource setVA}" Grid.Row="0" Grid.Column="1">I'm on the Internet</TextBox>
<Button Style="{StaticResource setVA}" Grid.Row="0" Grid.Column="2">Don't click me</Button>
<Label Style="{StaticResource setVA}" Grid.Row="1" Grid.Column="0">Text2</Label>
<Slider Style="{StaticResource setVA}" Grid.Row="1" Grid.Column="1"></Slider>
<Button Style="{StaticResource setVA}" Grid.Row="1" Grid.Column="2">Click the other guy</Button>
</Grid>
</Window>
There's more information on using styles on MSDN

Related

WPF how to prevent focus wrap on several buttons?

I am curious if anyone knows if it is possible to prevent "focus wrap" on a series of buttons. If I merely add a few buttons to a grid within WPF like so:
<Window x:Class="ButtonList_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:ButtonList_Test"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<StackPanel x:Name="myStackPanel" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid x:Name="myGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0">A</Button>
<Button Grid.Column="1" Grid.Row="0">B</Button>
<Button Grid.Column="2" Grid.Row="0">C</Button>
<Button Grid.Column="3" Grid.Row="0">D</Button>
<Button Grid.Column="4" Grid.Row="0">E</Button>
</Grid>
</StackPanel>
</Window>
And run the program, it will produce 5 small buttons in a nice single row.
If I click on the button in the middle (C), and then start to use any of the keyboard arrow keys, you will notice that the focus will begin to traverse these buttons in the direction of the key you are pressing.
If the dotted line reaches the "E" button, and I press one more time to the right, it will wrap back to the "A" button.
Is there any way to prevent this functionality?
Thank you in advance for any insight you may be willing to provide,
You can try Focusable="False". As far as I know, traverse controls with arrow keys or Tab keys can be happened by group of Focusable="True" controls only.
For example, if you try
<Button Grid.Column="0" Grid.Row="0">A</Button>
<Button Grid.Column="1" Grid.Row="0">B</Button>
<Button Grid.Column="2" Grid.Row="0" Focusable="False">C</Button>
<Button Grid.Column="3" Grid.Row="0">D</Button>
<Button Grid.Column="4" Grid.Row="0">E</Button>
and click B then press right key, D will be focused. So if you want to prevent every traverse, you can set Focusable="False" to every Buttons.
Set the IsTabStop property of all buttons to false or define an implicit Style that sets this property for all buttons:
<StackPanel x:Name="myStackPanel" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid x:Name="myGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="IsTabStop" Value="False" />
</Style>
</Grid.Resources>
<Button Grid.Column="0" Grid.Row="0">A</Button>
<Button Grid.Column="1" Grid.Row="0">B</Button>
<Button Grid.Column="2" Grid.Row="0">C</Button>
<Button Grid.Column="3" Grid.Row="0">D</Button>
<Button Grid.Column="4" Grid.Row="0">E</Button>
</Grid>
</StackPanel>

Toolbar isn't showing overflow when hosted in UserControl

Hosted in a Window, I have a main UserControl composed of other UserControls.
One of these contains a ToolBar with a few Buttons on it. I place this at the top of my main UserControl by setting it's Grid.Row property to 0. However, when making the Window smaller, the Buttons just disappear and no overflow is shown. I've messed with the overflow properties a bit but no luck.
Here's the UserControl containing the ToolBar.
<UserControl x:Class="TestProj.Views.ToolBarView"
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.ColumnDefinitions>
<ColumnDefinition Width="706"/>
<ColumnDefinition Width="319"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<ToolBar Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
<Button Content="Button1" />
<Button Content="Button2" />
<Button Content="Button3" />
<Button Content="Button4" />
<Button Content="Button5" />
<Button Content="Button6" />
</ToolBar>
</Grid>
</UserControl>
Here's my main UserControl which is hosted inside of a Window, and hosts the ToolBar UserControl:
<UserControl x:Class="TestProj.MainControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:views="clr-TestProj.Views"
mc:Ignorable="d" d:DesignHeight="737.239" d:DesignWidth="1026"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="256*"/>
<ColumnDefinition Width="256*"/>
<ColumnDefinition Width="256*"/>
<ColumnDefinition Width="430*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto">
</RowDefinition>
<RowDefinition Height="608*"/>
<RowDefinition Height="Auto">
</RowDefinition>
</Grid.RowDefinitions>
<views:ToolBarView HorizontalAlignment="Left" x:Name="OnyxToolBar" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" />
</Grid>
</UserControl>
And here's an example .gif of me resizing the Window, just the top where the UserControl containing the ToolBar is:
The problem is your fixed sized columns in your UserControl aka ToolBarView
you can not give to some control (does not matter if it is a ToolBar or not) a fixed size value and expect to have "dynamic size"
in your situation you could do something like this
change this
<Grid.ColumnDefinitions>
<ColumnDefinition Width="706"/>
<ColumnDefinition Width="319"/>
</Grid.ColumnDefinitions>
to this (for example)
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

Unexpected auto grid column width

the code below is a small snippet of a big wpf Window I am using in my Project. It produces the linked wpf Window.
I am wondering why my last grid column is so wide. I am expecting that the width of the last column depends on the width of the button, because the column width is set to "Auto".
If I remove the columnspan of the StackPanel the column width will be correct but then the CheckBoxes are not aligned to right side.
I hope you have understood my problem. My aim is, that the last column is as small as possible, the checkboxes are at the right side and the rest stays at it is.
Because this snippet is part of a bigger wpf window I cannot remove any grid rows or columns.
Thank you very much for your help.
Best regards.
WPF Window
<Window x:Class="TestProject.Window1"
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"
d:DesignHeight="152.429" d:DesignWidth="403">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Grid.Row="0"
Margin="5"
Grid.ColumnSpan="2"/>
<Button Grid.Column="2"
Grid.Row="0"
Margin="5"
Width="40"/>
<ComboBox Grid.Column="0"
Grid.Row="1"
Margin="5"
Grid.ColumnSpan="3"/>
<Image Grid.Column="0"
Grid.Row="2"/>
<StackPanel Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="2">
<CheckBox Margin="5"
Content="checkbox content 1"/>
<CheckBox Margin="5,0,5,5"
Content="checkbox content 2"/>
</StackPanel>
</Grid>
You can put a grid inside another grid.
Here is the code that will help you achieve your goal.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Grid.Row="0"
Margin="5"
Grid.ColumnSpan="2"/>
<Button Grid.Column="2"
Grid.Row="0"
Margin="5"
Width="40"/>
<ComboBox Grid.Column="0"
Grid.Row="1"
Margin="5"
Grid.ColumnSpan="3"/>
<Grid Name="GridInsideAGrid"
Grid.Column="0"
Grid.Row="2"
Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" />
<StackPanel Grid.Column="1">
<CheckBox Margin="5"
Content="checkbox content 1"/>
<CheckBox Margin="5,0,5,5"
Content="checkbox content 2"/>
</StackPanel>
</Grid>
</Grid>

WPF Window/Frame/Page

I have a Window which holds a Grid containing: a Label and a Frame. The Frame holds a Page. The Page has a Button and a Label.
Both Labels (on Window and Page) are bound to the same string property, which initially works correctly.
The Button (on the page) changes the string property, which I expect to change both the Label on the Window and the Label on the Page.
The problem is that it only changes the Label on the Page and not the Label on the Window. Is there a way to have a button on a page change an element in it's parent window? Also, if there is an explanation of why this is happening I would appreciate it.
Window Xaml:
<Window.DataContext>
<ViewModel:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding SourceTitleHeader, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Left"
Foreground="Red">
</Label>
</Grid>
<Frame Grid.Row="1" Grid.Column="0" Source="\Views\Page1.xaml">
</Frame>
</Grid>
Page Xaml:
<Page.DataContext>
<ViewModel:MainWindowViewModel/>
</Page.DataContext>
<StackPanel Margin="10">
<Label Content="{Binding SourceTitleHeader, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Left"
Margin="0 0 0 20">
</Label>
<Button Content="ChangeLabel" Width="100" Height="30" HorizontalAlignment="Left"
Command="{Binding Refresh_Screen_Command}">
</Button>
</StackPanel>
You have two different objects used for DataContext of window and page, make sure you are using same object.
<Window.Resources>
<ResourceDictionary>
<local:MainWindowViewModel x:Key="ViewModel" />
</ResourceDictionary>
</Window.Resources>
<Grid DataContext="{StaticResource ViewModel}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding SourceTitleHeader, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Left"
Foreground="Red">
</Label>
</Grid>
<Frame Grid.Row="1" Grid.Column="0">
<Frame.Content>
<local:Page1 DataContext="{StaticResource ViewModel}" />
</Frame.Content>
</Frame>
</Grid>

using one data template in another data template in WPF

I have two data templates, one of which is the subset of another like below:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:igEditors="http://infragistics.com/Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:controls="clr-namespace:Client.UI.WPF;assembly=Client.UI.WPF"
xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Client.Resources.WPF.Styles;Component/Styles/CommonStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<DataTemplate x:Key="XYZDataTemplate">
<Grid x:Name="_rootGrid" DataContext="{Binding DataContext}" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<controls:ValueDisplay Grid.Row="0" Grid.Column="0" LabelText="Build number" x:Name="buildNumber" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120"
Margin="5,10,0,0">
<igEditors:XamTextEditor />
</controls:ValueDisplay>
<controls:ValueDisplay Grid.Row="0" Grid.Column="1" LabelText="Tool version" x:Name="toolVersion" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120"
Margin="20,10,0,0">
<igEditors:XamTextEditor IsReadOnly="True"/>
</controls:ValueDisplay>
</Grid>
</DataTemplate>
and the other is like below:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:igEditors="http://infragistics.com/Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:controls="clr-namespace:BHI.ULSS.Client.UI.WPF;assembly=ULSS.Client.UI.WPF"
xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
>
<DataTemplate x:Key="ABCDataTemplate" >
<Grid x:Name="_rootGrid" DataContext="{Binding DataContext}" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<controls:ValueDisplay Grid.Row="0" Grid.Column="0" LabelText="Build number" x:Name="buildNumber" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120"
Margin="5,10,0,0">
<igEditors:XamTextEditor />
</controls:ValueDisplay>
<controls:ValueDisplay Grid.Row="0" Grid.Column="1" LabelText="Tool version" x:Name="toolVersion" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120"
Margin="20,10,0,0">
<igEditors:XamTextEditor IsReadOnly="True"/>
</controls:ValueDisplay>
<controls:ValueDisplay Grid.Row="0" Grid.Column="2" LabelText="Size" ShowUnit="True" x:Name="size" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120"
Margin="20,10,0,0">
<igEditors:XamTextEditor/>
</controls:ValueDisplay>
</Grid>
</DataTemplate>
XYZDataTemplate is a subset of the ABCDataTemplate as the first two fields in both the data templates are common, so I was wondering if it is possible to replace the redundant code in the ABCDataTemplate with that of the XYZDataTemplate for code maintainability? Could anyone please suggest if would this be a right approach, if so how can I acheive that?
Thanks in advance,
Sowmya
If you have some boilerplate in XAML, you can use ContenPresenter as a sort of "macro" to expand your boilerplate in multiple places. First you define a DataTemplate and then you use the ContentPresenter with the resource key to "expand" the macro. Here is an example:
<Grid>
<Grid.Resources>
<DataTemplate x:Key="boilerplate">
<StackPanel Orientation="Horizontal">
<Rectangle Width="100" Height="100" Stroke="Black" Fill="{Binding}"/>
<Rectangle Width="100" Height="100" Stroke="Black" Fill="{Binding}"/>
</StackPanel>
</DataTemplate>
</Grid.Resources>
<StackPanel>
<ContentPresenter ContentTemplate="{StaticResource boilerplate}" Content="Red"/>
<ContentPresenter ContentTemplate="{StaticResource boilerplate}" Content="Blue"/>
</StackPanel>
</Grid>
As the template is a real template you can use data binding. Think of it as an ItemsControl with just one item. If there is no binding you can omit the Content property. You can think of it as the macro "parameter".
Over-using this will make your XAML harder to read and it has a modest performance cost so use it carefully. Finally, there are some limitations in that the "macro" always expands to one top-level element so you cannot add two elements to a single Panel with a single use of ContentPresenter.
Using VS2010, I would consider using a UserControl.
UserControls automatically inherit the DataContext property from their parents + have design time support + u don't have to hard code resource paths.

Resources