Example: In WPF an element can be positioned in Canvas using the Canvas.Left and Canvas.Top properties as well as the Canvas.Right and Canvas.Bottom properties:
<Canvas> <Button Content="Button 1" /> <Button Content="Button 2" Canvas.Left="30" Canvas.Top="30" /> <Button Content="Button 3" Canvas.Left="70" Canvas.Top="100" Width="180" Height="40" /> <Button Content="Button 4" Canvas.Right="30" Canvas.Bottom="30" /> </Canvas>
Example: In WPF the ClipToBounds property clips off elements that stretch beyond Canvas boundaries:
<Canvas Width="15" Height="15" ClipToBounds="True"> <Rectangle Fill="Crimson" Canvas.Left="11" Canvas.Top="0" Width="10" Height="20" /> <Path Fill="CornflowerBlue" Stroke="Black" Canvas.Left="1" Canvas.Top="1" StrokeThickness="1" Data="M 0,7 L 5,2 5,5 13,5 13,9 5,9 5,12 z" /> </Canvas>
ClipToBounds set to True:
ClipToBounds set to False:
Example: A simple ComboBox:
<Window x:Class="QuickTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:Collections="clr-namespace:System.Collections;assembly=mscorlib" Title="MainWindow" Height="150" Width="220"> <Window.Resources> <Collections:ArrayList x:Key="ProgrammingLanguages"> <System:String>C++</System:String> <System:String>Java</System:String> <System:String>Visual Basic</System:String> <System:String>Perl</System:String> <System:String>Python</System:String> </Collections:ArrayList> </Window.Resources> <StackPanel> <ComboBox Name="cboLanguage" ItemsSource="{StaticResource ProgrammingLanguages}" SelectedValue="{Binding Path=Java}" Width="100" Margin="15" IsEditable="False" SelectionChanged="cboLanguage_SelectionChanged" UIElement.PreviewMouseDown="cboLanguage_MouseDown"> <ComboBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">LightSteelBlue</SolidColorBrush> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}">Black</SolidColorBrush> </ComboBox.Resources> </ComboBox> </StackPanel> </Window>
using System; using System.Windows; using System.Windows.Controls; using System.Windows.Input; namespace QuickTest { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void cboLanguage_SelectionChanged(object sender, SelectionChangedEventArgs e) { // Obtain a string representing the selected item. ComboBox cboLanguage = sender as ComboBox; string language = cboLanguage.SelectedItem as string; // ... } // Select the clicked row in the ListBox. private void cboLanguage_MouseDown(object sender, MouseButtonEventArgs e) { ComboBox cboLanguage = sender as ComboBox; // ... } } }
Example: Change the style of the highlighted item by extending the default template:
<Window x:Class="QuickTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:Collections="clr-namespace:System.Collections;assembly=mscorlib" Title="MainWindow" Height="200" Width="220"> <Window.Resources> <Collections:ArrayList x:Key="ProgrammingLanguages"> <System:String>C++</System:String> <System:String>Java</System:String> <System:String>Visual Basic</System:String> <System:String>Perl</System:String> <System:String>Python</System:String> </Collections:ArrayList> <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" /> <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" /> <Style x:Key="{x:Type ComboBoxItem}" TargetType="ComboBoxItem"> <Setter Property="SnapsToDevicePixels" Value="true"/> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ComboBoxItem"> <Border Name="Border" Height="25" Padding="2" SnapsToDevicePixels="true"> <ContentPresenter VerticalAlignment="Center" Margin="3,0,0,0" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsHighlighted" Value="true"> <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <StackPanel> <ComboBox Name="cboLanguage" ItemsSource="{StaticResource ProgrammingLanguages}" Width="100" Margin="15" IsEditable="False" /> </StackPanel> </Window>
Example: Change the colors of the highlighted item by redefining the colors in resources:
<ComboBox> <ComboBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">LightSteelBlue</SolidColorBrush> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}">Black</SolidColorBrush> </ComboBox.Resources> </ComboBox>
Example: An editable DataGrid:
Read-only mode:
Edit mode (after double clicking a cell):
<Window x:Class="TestApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="TestApp" Width="300" Height="300"> <DataGrid x:Name="GridComments" GridLinesVisibility="Horizontal" HorizontalGridLinesBrush="LightGray" AutoGenerateColumns="False" HeadersVisibility="Row" RowHeight="20"> <DataGrid.Columns> <DataGridTextColumn Header="Comment" Binding="{Binding Path=Text}" Width="Auto"> <DataGridTextColumn.ElementStyle> <Style TargetType="TextBlock"> <Setter Property="Background" Value="AliceBlue" /> <Setter Property="TextWrapping" Value="Wrap" /> </Style> </DataGridTextColumn.ElementStyle> <DataGridTextColumn.EditingElementStyle> <Style TargetType="TextBox"> <Setter Property="Background" Value="Yellow" /> <Setter Property="TextWrapping" Value="Wrap" /> <Setter Property="AcceptsReturn" Value="True" /> </Style> </DataGridTextColumn.EditingElementStyle> </DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Window>
using System.Collections.Generic; using System.Windows; namespace TestApp { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); GridComments.ItemsSource = GetComments(); } private IList<Comment> GetComments() { return new List<Comment>() { new Comment { ID = 1, Text="Comment#1"}, new Comment { ID = 2, Text="Comment#2"}, new Comment { ID = 3, Text="Comment#3"} }; } } public class Comment { public int ID { get; set; } public string Text { get; set; } } }
Example: A simple DatePicker:
<Window x:Class="QuickTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="150" Width="200"> <Window.Resources> <Style x:Key="DatePickerStyle" TargetType="DatePicker"> <Setter Property="Background" Value="White"/> <Setter Property="Margin" Value="2"/> <Setter Property="Padding" Value="2"/> <Setter Property="BorderBrush" Value="Gray"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="UseLayoutRounding" Value="True"/> </Style> <Style x:Key="CalendarStyle" TargetType="Calendar"> <Setter Property="Margin" Value="2"/> <Setter Property="Padding" Value="2"/> <Setter Property="BorderBrush" Value="SteelBlue"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="UseLayoutRounding" Value="True"/> </Style> </Window.Resources> <StackPanel> <TextBlock Padding="3">Date Visited:</TextBlock> <DatePicker Name="pickerDateVisited" Style="{StaticResource DatePickerStyle}" SelectedDate="{Binding Path=DateInspected}" SelectedDateFormat="Short" CalendarStyle="{StaticResource CalendarStyle}" /> </StackPanel> </Window>
DockPanel aligns elements against an edge of the panel. The order of the elements is important.
Example: A simple DockPanel:
<DockPanel> <Label Content="Top" DockPanel.Dock="Top" Background="Red"/> <Label Content="Left" DockPanel.Dock="Left" Background="Gray"/> <Label Content="Right" DockPanel.Dock="Right" Background="Cyan"/> <Label Content="Bottom" DockPanel.Dock="Bottom" Background="Magenta"/> <Label Content="" Background="Yellow"/> <!-- fills the remaining area --> </DockPanel>
Example: DockPanel.LastChildFill determines behaviour of the last child in DockPanel:
<DockPanel LastChildFill="False"> <Label Content="Top" DockPanel.Dock="Top" Background="Red"/> <Label Content="Left" DockPanel.Dock="Left" Background="Gray"/> <Label Content="Right" DockPanel.Dock="Right" Background="Cyan"/> <Label Content="Bottom" DockPanel.Dock="Bottom" Background="Magenta"/> <Label Content="Content" Background="Yellow"/> <!-- does not fill the remaining area --> </DockPanel>
Example: Nested DockPanels:
<DockPanel> <TextBlock DockPanel.Dock="Top" Background="LightBlue">Header</TextBlock> <TextBlock DockPanel.Dock="Bottom" Background="LightYellow">Footer</TextBlock> <TextBlock DockPanel.Dock="Left" Background="Lavender">Side Bar</TextBlock> <!-- fills the remaining area of the outer panel --> <DockPanel Background="Bisque"> <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="5"> <Button HorizontalAlignment="Left" Height="20" Width="70" Margin="5">Button1</Button> <Button HorizontalAlignment="Left" Height="20" Width="70" Margin="5">Button2</Button> </StackPanel> <!-- fills the remaining area of the inner panel --> <TextBlock Background="LightGreen">Content</TextBlock> </DockPanel> </DockPanel>
Example: A typical layout using a DockPanel:
<Window x:Class="QuickTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="400"> <Window.Resources> <!-- Title --> <Style x:Key="TitleText" TargetType="TextBlock"> <Setter Property="FontSize" Value="26"/> <Setter Property="Margin" Value="5"/> <Setter Property="Padding" Value="3,3,0,0"/> <Setter Property="Foreground" Value="SteelBlue" /> </Style> <!-- Toolbar elements styles --> <Style x:Key="ToolbarText" TargetType="TextBlock"> <Setter Property="FontSize" Value="14"/> <Setter Property="Margin" Value="2"/> </Style> <Style x:Key="ToolbarComboBox" TargetType="ComboBox"> <Setter Property="FontSize" Value="14"/> </Style> <Style x:Key="ToolbarButton" TargetType="Button"> <Setter Property="Height" Value="25"/> <Setter Property="Margin" Value="5,1"/> <Setter Property="Padding" Value="1"/> <Setter Property="MinWidth" Value="70"/> <Setter Property="FontSize" Value="12"/> <Setter Property="Background" > <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="DarkGray" Offset="0.2"/> <GradientStop Color="LightGray" Offset="0.85"/> <GradientStop Color="DarkGray" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </Window.Resources> <DockPanel LastChildFill="True"> <!-- Toolbar --> <ToolBarTray DockPanel.Dock="Top"> <ToolBar> <StackPanel Orientation="Horizontal"> <TextBlock Text="Company: " Style="{StaticResource ToolbarText}" Margin="3,3,0,3" VerticalAlignment="Center" /> <ComboBox x:Name="cboCompanies" DisplayMemberPath="CompanyName" Style="{StaticResource ToolbarComboBox}" Width="150" Height="25" IsEditable="False" /> <Button x:Name="btnDetails" Style="{StaticResource ToolbarButton}">Details</Button> </StackPanel> </ToolBar> </ToolBarTray> <!-- Title --> <TextBlock DockPanel.Dock="Top" Style="{StaticResource TitleText}">Contacts</TextBlock> <!-- Status bar --> <StatusBar DockPanel.Dock="Bottom" xml:space="preserve">WBS - 2012</StatusBar> <!-- Contact list --> <ListBox x:Name="ContactsList" ItemsSource="{Binding}" Height="Auto" Width="Auto" HorizontalContentAlignment="Stretch" BorderThickness="1" ScrollViewer.CanContentScroll="False"> <ListBox.ItemTemplate> <DataTemplate> <Grid Margin="5,0,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Text="{Binding Path=Name}" /> <TextBlock Grid.Column="1" Text="{Binding Path=Email}" /> <TextBlock Grid.Column="2" Text="{Binding Path=Phone}" /> </Grid> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </DockPanel> </Window>
Example: A vertical GridSplitter:
<Grid> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition MinWidth="100"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition MinWidth="30"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Margin="3" Background="Blue" /> <TextBlock Grid.Row="0" Grid.Column="2" Margin="3" Background="Red" /> <TextBlock Grid.Row="1" Grid.Column="0" Margin="3" Background="Yellow" /> <TextBlock Grid.Row="1" Grid.Column="2" Margin="3" Background="Green" /> <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="2" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False" Background="Black" /> </Grid>
Splitter moved maximum to the left:
Splitter moved maximum to the right:
GridSplitter gudelines:
GridSplitter properties:
Example:
<DockPanel> <Grid HorizontalAlignment="Left" DockPanel.Dock="Top"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Menu Grid.Column="0" Padding="3"> <MenuItem Header="File"> <MenuItem Header="New Contact" /> <MenuItem Header="New Group" /> <Separator /> <MenuItem Header="Properties" /> <MenuItem Header="Delete" /> <MenuItem Header="Import"> <MenuItem Header="Address book (WAB)..." /> <MenuItem Header="Business card vCard)..." /> </MenuItem> <Separator /> <MenuItem Header="Exit" InputGestureText="Alt-F4" > <MenuItem.ToolTip> <ToolTip> Click here to exit </ToolTip> </MenuItem.ToolTip> </MenuItem> </MenuItem> </Menu> <Menu Grid.Column="1" Padding="3"> <MenuItem Header="Edit"> <MenuItem Command="ApplicationCommands.Copy"/> <MenuItem Command="ApplicationCommands.Paste"/> </MenuItem> </Menu> </Grid> <!-- Just to provide some content for the DockPanel --> <Grid> </Grid> </DockPanel>
Example: A Popup control displayed beneath a TextBlock 'CommentLabel':
<Window x:Class="QuickTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="200" Width="200"> <StackPanel> <TextBlock TextWrapping="Wrap"> <Run TextDecorations="Underline" MouseEnter="ShowCommentsPopup_MouseEnter">Enter comments</Run> </TextBlock> <TextBlock x:Name="CommentLabel" Margin="3" /> <Popup x:Name="CommentPopup" Width="{Binding Path=Width,RelativeSource={RelativeSource AncestorType={x:Type Window}}}" Height="Auto" VerticalOffset="0" HorizontalOffset="-5" StaysOpen="False" Placement="Bottom" PopupAnimation="Slide" AllowsTransparency="True" PlacementTarget="{Binding ElementName=CommentLabel}"> <!-- Elements go here --> <Border BorderBrush="Navy" BorderThickness="1" Background="AntiqueWhite"> <StackPanel Orientation="Horizontal"> <TextBlock Margin="3">Comment:</TextBlock> <TextBox Width="100" Margin="3"></TextBox> </StackPanel> </Border> </Popup> </StackPanel> </Window>
The IsOpen property of the Popup control:
using System.Windows; using System.Windows.Input; namespace QuickTest { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void ShowCommentsPopup_MouseEnter(object sender, MouseEventArgs e) { // Show the popup. CommentPopup.IsOpen = true; } } }
A few characteristics of shapes:
Shape classes:
Shape properties:
Example: A rectangle and an ellipse:
<Window x:Class="QuickTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="300" Width="300"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <StackPanel> <Ellipse Fill="AliceBlue" Stroke="Navy" Width="100" Height="50" Margin="5" HorizontalAlignment="Left"></Ellipse> <Rectangle Fill="AntiqueWhite" Stroke="Blue" Width="100" Height="50" Margin="5" HorizontalAlignment="Left"></Rectangle> </StackPanel> <Canvas Grid.Row="1"> <Ellipse Fill="AliceBlue" Stroke="Blue" Canvas.Left="80" Canvas.Top="60" Width="100" Height="50"></Ellipse> <Rectangle Fill="AntiqueWhite" Stroke="Blue" Canvas.Left="30" Canvas.Top="40" Width="100" Height="50"></Rectangle> </Canvas> </Grid> </Window>
Example: Rectangles with rounded corners:
<Window x:Class="QuickTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="420" Width="300"> <StackPanel HorizontalAlignment="Center"> <TextBlock Margin="5">RadiusX="5" RadiusY="5"</TextBlock> <Rectangle Fill="Yellow" Stroke="Black" RadiusX="5" RadiusY="5" Width="100" Height="60" Margin="5" HorizontalAlignment="Left"> </Rectangle> <TextBlock Margin="5">RadiusX="10" RadiusY="10"</TextBlock> <Rectangle Fill="Blue" Stroke="Black" RadiusX="10" RadiusY="10" Width="100" Height="60" Margin="5" HorizontalAlignment="Left"></Rectangle> <TextBlock Margin="5">RadiusX="10" RadiusY="25"</TextBlock> <Rectangle Fill="Green" Stroke="Black" RadiusX="10" RadiusY="25" Width="100" Height="60" Margin="5" HorizontalAlignment="Left"></Rectangle> <TextBlock Margin="5">RadiusX="100" RadiusY="60"</TextBlock> <Rectangle Fill="Red" Stroke="Black" RadiusX="100" RadiusY="60" Width="100" Height="60" Margin="5" HorizontalAlignment="Left"></Rectangle> </StackPanel> </Window>
Example: An ellipse filling up the window. Because we don't provide the Height and Width properties, the shape is sized to its container:
<Window x:Class="QuickTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="300" Width="300"> <Grid> <Ellipse Fill="Aquamarine" Stroke="Navy"></Ellipse> </Grid> </Window>
A shared size group matches the definition of a column (or a row) in one grid to a column (or a row) in another grid. In order to enable this feature a container has to have the property Grid.IsSharedSizeScope set to True and the values of the property SharedSizeGroup of the grids have to match.
Example: Use SharedSizeGroup to share definition of the first column in two separate grids:
<Grid Grid.IsSharedSizeScope="True" ShowGridLines="True"> <!-- IsSharedSizeScope --> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="LabelColumn" /> <!-- SharedSizeGroup --> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Label Grid.Column="0" Margin="3" Background="AliceBlue">Some more text goes here</Label> <Label Grid.Column="1" Margin="3" Background="AntiqueWhite">Hello</Label> <Label Grid.Column="2" Margin="3" Background="Beige">Here</Label> </Grid> <Grid Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="LabelColumn" /> <!-- SharedSizeGroup --> <ColumnDefinition /> </Grid.ColumnDefinitions> <Label Grid.Column="0" Margin="3" Background="FloralWhite">Little text</Label> <Label Grid.Column="1" Margin="3" Background="Cornsilk">Hello here</Label> </Grid> </Grid>
The same code but with sharing definition of different columns (the first column in the top grid and the second column in the bottom grid):
Example: A shared size scope column and a scrollbar:
<DockPanel DockPanel.Dock="Bottom" Grid.IsSharedSizeScope="True"> <DockPanel.Resources> <Style TargetType="{x:Type TextBlock}"> <Setter Property="Margin" Value="5,3" /> </Style> </DockPanel.Resources> <!-- Header grid --> <Grid DockPanel.Dock="Top"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" SharedSizeGroup="Author" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Border Grid.Column="0" Grid.Row="0" Background="LightGray" BorderBrush="Gray" BorderThickness="1"> <TextBlock>Title</TextBlock> </Border> <Border Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Background="LightGray" BorderBrush="Gray" BorderThickness="1"> <TextBlock>Author</TextBlock> </Border> <!-- A "dummy" scroll bar just to get its width in order to properly size columns --> <ScrollBar Grid.Column="3" Orientation="Vertical" Visibility="Hidden" Height="20" /> </Grid> <!-- Content grid --> <ScrollViewer> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" SharedSizeGroup="Author" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Grid.Row="0">The C++ Programming Language</TextBlock> <TextBlock Grid.Column="1" Grid.Row="0">Bjarne Stroustrup</TextBlock> <TextBlock Grid.Column="0" Grid.Row="1">Effective C++</TextBlock> <TextBlock Grid.Column="1" Grid.Row="1">Scott Meyers</TextBlock> <TextBlock Grid.Column="0" Grid.Row="2">The C++ Standard Library</TextBlock> <TextBlock Grid.Column="1" Grid.Row="2">Nicolai M. Josuttis</TextBlock> <TextBlock Grid.Column="0" Grid.Row="3">C++ in a Nutshell</TextBlock> <TextBlock Grid.Column="1" Grid.Row="3">Ray Lischner</TextBlock> <TextBlock Grid.Column="0" Grid.Row="4">C++ Pocket Reference</TextBlock> <TextBlock Grid.Column="1" Grid.Row="4">Kyle Loudon</TextBlock> </Grid> </ScrollViewer> </DockPanel>
The same code but with Grid.IsSharedSizeScope set to False which makes the two grids inconsistent:
Example: A SharedSizeGroup and GridSplitter placed in the header of the first grid:
<DockPanel DockPanel.Dock="Bottom" Grid.IsSharedSizeScope="True"> <DockPanel.Resources> <Style TargetType="{x:Type TextBlock}"> <Setter Property="Margin" Value="5,3" /> </Style> </DockPanel.Resources> <!-- Header grid --> <Grid DockPanel.Dock="Top"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" MinWidth="80" SharedSizeGroup="Title" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Border Grid.Column="0" Grid.Row="0" Background="LightGray" BorderBrush="Gray" BorderThickness="1"> <TextBlock>Title</TextBlock> </Border> <Border Grid.Column="2" Grid.Row="0" Background="LightGray" BorderBrush="Gray" BorderThickness="1"> <TextBlock>Author</TextBlock> </Border> <GridSplitter Grid.Column="1" Grid.Row="0" Width="2" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False" Background="Black" /> </Grid> <!-- Content grid --> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="Title" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Rectangle Grid.Column="1" Grid.RowSpan="5" Fill="AliceBlue"></Rectangle> <TextBlock Grid.Column="0" Grid.Row="0">The C++ Programming Language</TextBlock> <TextBlock Grid.Column="1" Grid.Row="0">Bjarne Stroustrup</TextBlock> <TextBlock Grid.Column="0" Grid.Row="1">Effective C++</TextBlock> <TextBlock Grid.Column="1" Grid.Row="1">Scott Meyers</TextBlock> <TextBlock Grid.Column="0" Grid.Row="2">The C++ Standard Library</TextBlock> <TextBlock Grid.Column="1" Grid.Row="2">Nicolai M. Josuttis</TextBlock> <TextBlock Grid.Column="0" Grid.Row="3">C++ in a Nutshell</TextBlock> <TextBlock Grid.Column="1" Grid.Row="3">Ray Lischner</TextBlock> <TextBlock Grid.Column="0" Grid.Row="4">C++ Pocket Reference</TextBlock> <TextBlock Grid.Column="1" Grid.Row="4">Kyle Loudon</TextBlock> </Grid> </DockPanel>
This allows users to resize the header and the entire column underneath:
WPF specialized containers:
GroupBox:
<GroupBox Header="Testing..." Padding="3"> <StackPanel> <RadioButton Margin="3">Blue</RadioButton> <RadioButton Margin="3">Green</RadioButton> <RadioButton Margin="3">Red</RadioButton> </StackPanel> </GroupBox>
TabControl/TabItem:
<TabControl Margin="3"> <TabItem Header="Panel 1"> <StackPanel Margin="3"> <CheckBox Margin="3">Red</CheckBox> <CheckBox Margin="3">Green</CheckBox> <CheckBox Margin="3">Yellow</CheckBox> </StackPanel> </TabItem> <TabItem Header="Panel 2"> ... </TabItem> </TabControl>
Expander:
<StackPanel> <Expander Padding="5" Header="Test1"> <Button Padding="3">Button1</Button> </Expander> <Expander Padding="5" Header="Test2"> <TextBlock>Testing...</TextBlock> </Expander> </StackPanel>
Tooltips are content controls. It is possible to tweak timing settings of the ToolTip to control how quickly it appears and disappears.
Commonly used properties of the ToolTip:
Some properties of the ToolTipService:
<!-- Example #1 --> <Button ToolTip="This is my tooltip">I have a tooltip</Button> <!-- Example #2 --> <Button> <Button.ToolTip> <StackPanel> <TextBlock>This is </TextBlock> <TextBlock>tooltip</TextBlock> </StackPanel> </Button.ToolTip> <Button.Content>My Button</Button.Content> </Button> <!-- Example #3 --> <Button> <Button.ToolTip> <ToolTip Background="Azure" Foreground="Crimson" HasDropShadow="False"> <StackPanel> <TextBlock>This is </TextBlock> <TextBlock>tooltip</TextBlock> </StackPanel> </ToolTip> </Button.ToolTip> <Button.Content>My Button</Button.Content> </Button> <!-- Example #4 --> <Button ToolTipService.InitialShowDelay="1"> ... </Button> <!-- Example #5 --> <Button ToolTip="Some text" ToolTipService.Placement="Bottom">my button</Button>
UniformGrid arranges elements in a table and forces all cells to have the same size. It doesn't support predefined columns and rows; the cells are placed in the grid in the order they are defined.
<UniformGrid Rows="3" Columns="3"> <TextBlock Background="Green" /> <TextBlock Background="Red" /> <TextBlock Background="Green" /> <TextBlock Background="Red" /> <TextBlock Background="Green" /> <TextBlock Background="Red" /> <TextBlock Background="Green" /> <TextBlock Background="Red" /> <TextBlock Background="Green" /> </UniformGrid>
Example: A simple WrapPanel:
<Window x:Class="QuickTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="120" Width="350"> <!-- Orientation="Horizontal" is the default value --> <WrapPanel Orientation="Horizontal" Margin="3"> <TextBlock VerticalAlignment="Bottom" Background="Aquamarine">Bottom Text</TextBlock> <TextBlock VerticalAlignment="Center" Background="BurlyWood">Center Text</TextBlock> <TextBlock VerticalAlignment="Top" Background="AliceBlue">Top Text</TextBlock> <Button MinHeight="50">Button1</Button> <Button>Button2</Button> <Button Height="50">Button3</Button> </WrapPanel> </Window>