Skip to content

Instantly share code, notes, and snippets.

@rstropek

rstropek/010-MainWindow.xaml

Last active April 14, 2021 13:36
Show Gist options
  • Save rstropek/0239c9deba14943c8de7a1f0778abcd7 to your computer and use it in GitHub Desktop.
Save rstropek/0239c9deba14943c8de7a1f0778abcd7 to your computer and use it in GitHub Desktop.
Download ZIP
XAML Intro
Raw
010-MainWindow.xaml
<Window x:Class="HelloXaml.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:HelloXaml"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<!--
+=== Will become an object of this class
|
| +=== Property of class
| |
V V -->
<StackPanel Margin="10">
<!--
+=== Will become an object of this class
|
| +=== Property of class ==================+
| | | |
V V V V -->
<Button Background="Green" Foreground="Yellow" MinHeight="75">
Click me <!-- ===> will be written to `Content` property ("Content Control") -->
</Button>
<TextBlock Text="Hello World" FontSize="35" />
</StackPanel>
</Window>
Raw
020-MainWindow.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace HelloXaml
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent(); // <<< IMPORTANT when loading XAML!!! DO NOT DELETE!!!
BuildControls();
}
public void BuildControls()
{
var btn = new Button
{
Background = Brushes.Green,
Foreground = Brushes.Yellow,
MinHeight = 75,
Content = "Click me"
};
var tb = new TextBlock { Text = "Hello World", FontSize = 35 };
var sp = new StackPanel { Margin = new Thickness(10) };
sp.Children.Add(btn);
sp.Children.Add(tb);
Content = sp;
}
}
}
Raw
030-grid.xaml
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"
Background="LightGray" Text="A Title" FontSize="16"
FontWeight="Bold" />
<TextBlock Grid.Column="0" Grid.Row="1" Text="This" />
<TextBlock Grid.Column="1" Grid.Row="1" Text="is" />
<TextBlock Grid.Column="0" Grid.Row="2" Text="my" />
<TextBlock Grid.Column="1" Grid.Row="2" Text="Grid!" />
<TextBlock Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2"
Background="LightGray" Text="A Footer" FontSize="10" />
</Grid>
Raw
035-stackpanel.xaml
<StackPanel>
<Button>The quick</Button>
<Button>brown fox</Button>
<StackPanel Orientation="Horizontal">
<Button>jumps</Button>
<Button>over the</Button>
</StackPanel>
<Button>lazy dog!</Button>
</StackPanel>
Raw
040-dock-panel-menu.xaml
<StackPanel>
<DockPanel>
<Menu>
<MenuItem Header="Menu 1">
<MenuItem Header="Menu 1.1" />
<MenuItem Header="Menu 1.2" />
<MenuItem Header="Menu 1.3" />
</MenuItem>
<MenuItem Header="Menu 2">
<MenuItem Header="Menu 2.1" />
<MenuItem Header="Menu 2.2" />
</MenuItem>
</Menu>
</DockPanel>
<TextBlock Text="Hello World!" FontSize="75" />
</StackPanel>
Raw
050-wrap-panel-styles.xaml
<Window x:Class="HelloXaml.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:HelloXaml"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<!-- Note: Use Window Resources for styles -->
<Window.Resources>
<!-- Note: Styling. Different syntax than CSS, conceptually a little similar -->
<Style TargetType="TextBlock" x:Key="Header">
<Setter Property="FontSize" Value="25" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Margin" Value="0,5,0,10" />
</Style>
<Style TargetType="TextBlock" x:Key="Normal">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
<Style TargetType="Border" x:Key="Card">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="LightGray" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="Padding" Value="10" />
<Setter Property="Margin" Value="15" />
</Style>
</Window.Resources>
<!-- Note: Scroll viewer adds vertical scrolling -->
<ScrollViewer>
<!-- Change window size and watch what is going to happen -->
<WrapPanel>
<!-- Note how we reference styles in resources -->
<Border Style="{StaticResource Card}">
<StackPanel MinHeight="250" MaxWidth="200">
<Image Source="https://robohash.org/1" Height="200" />
<TextBlock Text="Robolix" Style="{StaticResource Header}" />
<TextBlock Text="What a wonderful robot is this! So cute and so red. I especially like the blue eyes." Style="{StaticResource Normal}" />
</StackPanel>
</Border>
<Border Style="{StaticResource Card}">
<StackPanel MinHeight="250" MaxWidth="200">
<Image Source="https://robohash.org/2" Height="200" />
<TextBlock Text="Automato" Style="{StaticResource Header}" />
<TextBlock Text="This one is my favorite! Love the yellow painting. All robots should be yellow." Style="{StaticResource Normal}" />
</StackPanel>
</Border>
<Border Style="{StaticResource Card}">
<StackPanel MinHeight="250" MaxWidth="200">
<Image Source="https://robohash.org/3" Height="200" />
<TextBlock Text="Crasher" Style="{StaticResource Header}" />
<TextBlock Text="Uhh, that one looks like you should be scared. But in reality, he is a cute guy." Style="{StaticResource Normal}" />
</StackPanel>
</Border>
<Border Style="{StaticResource Card}">
<StackPanel MinHeight="250" MaxWidth="200">
<Image Source="https://robohash.org/4" Height="200" />
<TextBlock Text="Robolix" Style="{StaticResource Header}" />
<TextBlock Text="What a wonderful robot is this! So cute and so red. I especially like the blue eyes." Style="{StaticResource Normal}" />
</StackPanel>
</Border>
<Border Style="{StaticResource Card}">
<StackPanel MinHeight="250" MaxWidth="200">
<Image Source="https://robohash.org/5" Height="200" />
<TextBlock Text="Automato" Style="{StaticResource Header}" />
<TextBlock Text="This one is my favorite! Love the yellow painting. All robots should be yellow." Style="{StaticResource Normal}" />
</StackPanel>
</Border>
<Border Style="{StaticResource Card}">
<StackPanel MinHeight="250" MaxWidth="200">
<Image Source="https://robohash.org/6" Height="200" />
<TextBlock Text="Crasher" Style="{StaticResource Header}" />
<TextBlock Text="Uhh, that one looks like you should be scared. But in reality, he is a cute guy." Style="{StaticResource Normal}" />
</StackPanel>
</Border>
</WrapPanel>
</ScrollViewer>
</Window>
Raw
060-tab-control.xaml
<Window x:Class="HelloXaml.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:HelloXaml"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style TargetType="TextBlock" x:Key="Header">
<Setter Property="FontSize" Value="25" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Margin" Value="0,5,0,10" />
</Style>
<Style TargetType="TextBlock" x:Key="Normal">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
<Style TargetType="Border" x:Key="Card">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="LightGray" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="Padding" Value="10" />
<Setter Property="Margin" Value="15" />
</Style>
<Style TargetType="TextBlock" x:Key="TabHeader">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0,0,10,0" />
</Style>
</Window.Resources>
<TabControl>
<TabItem>
<!-- Note "Property Element Syntax": Property (Header) written as XML element -->
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source="https://robohash.org/1" Height="30" />
<TextBlock Text="Robolix" Style="{StaticResource TabHeader}" />
</StackPanel>
</TabItem.Header>
<Border Style="{StaticResource Card}">
<StackPanel MinHeight="250" MaxWidth="200">
<Image Source="https://robohash.org/1" Height="200" />
<TextBlock Text="Robolix" Style="{StaticResource Header}" />
<TextBlock Text="What a wonderful robot is this! So cute and so red. I especially like the blue eyes." Style="{StaticResource Normal}" />
</StackPanel>
</Border>
</TabItem>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source="https://robohash.org/2" Height="30" />
<TextBlock Text="Automato" Style="{StaticResource TabHeader}" />
</StackPanel>
</TabItem.Header>
<Border Style="{StaticResource Card}">
<StackPanel MinHeight="250" MaxWidth="200">
<Image Source="https://robohash.org/2" Height="200" />
<TextBlock Text="Automato" Style="{StaticResource Header}" />
<TextBlock Text="This one is my favorite! Love the yellow painting. All robots should be yellow." Style="{StaticResource Normal}" />
</StackPanel>
</Border>
</TabItem>
</TabControl>
</Window>
Raw
070-form.xaml
<Window x:Class="HelloXaml.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:HelloXaml"
mc:Ignorable="d"
d:DataContext="local:MainWindow"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style TargetType="TextBox">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="0,5,0,5" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="Grid" x:Key="Size">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="DatePicker">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="Button">
<Setter Property="Margin" Value="0,5,0,5" />
<Setter Property="Padding" Value="5" />
</Style>
</Window.Resources>
<Grid Margin="10" MaxWidth="350">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Note: Element binding for tab control -->
<Label Target="{Binding ElementName=FirstName}">_First name:</Label>
<TextBox x:Name="FirstName" Grid.Column="1" />
<Label Grid.Row="1" Target="{Binding ElementName=LastName}">_Last name:</Label>
<TextBox x:Name="LastName" Grid.Row="1" Grid.Column="1" />
<Label Grid.Row="2" Target="{Binding ElementName=Birthday}">_Birthday:</Label>
<DatePicker x:Name="Birthday" Grid.Row="2" Grid.Column="1" />
<Label Grid.Row="3" Target="{Binding ElementName=Size}">_Size:</Label>
<!-- Note: Nested grid -->
<Grid Grid.Row="3" Grid.Column="1" Style="{StaticResource Size}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" MinWidth="25" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Slider x:Name="Size" Minimum="0" Maximum="250" Value="175"
TickFrequency="5" IsSnapToTickEnabled="True" />
<!-- Note: Binding between elements -->
<TextBlock Grid.Column="1" Text="{Binding ElementName=Size, Path=Value}"
HorizontalAlignment="Right"/>
<TextBlock Grid.Column="2" Text=" cm" />
</Grid>
<Button Grid.Column="1" Grid.Row="4" HorizontalAlignment="Left"
IsDefault="True" Click="OnSave">
Save
</Button>
</Grid>
</Window>
Raw
080-form.cs
using System.Windows;
namespace HelloXaml
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void OnSave(object sender, RoutedEventArgs e)
{
// NOTE: This can be done much better. You will learn about
// professional data binding later.
MessageBox.Show($"{FirstName.Text} {LastName.Text} " +
$"was born on {Birthday.SelectedDate:dd.MM.yyyy} " +
$"and is {Size.Value}cm tall.");
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment