More Related Content Similar to WPF L01-Layouts, Controls, Styles and Templates Similar to WPF L01-Layouts, Controls, Styles and Templates (20) More from Mohammad Shaker More from Mohammad Shaker (20) WPF L01-Layouts, Controls, Styles and Templates7. My 3rd Year Projects with.NET!
WPF
RFIDSystem
withC#
12. A lot of these WPF slides are ported from
http://www.blackwasp.co.uk/
25. ViewBox – Change Elements Sizes When Resized
<Viewbox>
<DockPanel Width="250" Height="200">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Background="LightBlue">
<Button Content="01" Margin="1"/>
<Button Content="02" Margin="1"/>
<Button Content="03" Margin="1 1 10 1"/>
<Button Content="04" Margin="1"/>
<Button Content="05" Margin="1"/>
<Button Content="06" Margin="1"/>
</StackPanel>
<StackPanel Orientation="Horizontal"
DockPanel.Dock="Bottom"
Background="Lightblue"
Height="25">
<TextBlock VerticalAlignment="Center">Processing</TextBlock>
<ProgressBar Value="75" Width="100" Margin="4"/>
</StackPanel>
<Grid>
<TextBlock>Content area</TextBlock>
</Grid>
</DockPanel>
</Viewbox>
Resized
Original Size
27. Border
• <Border Margin="5" Padding="5" Background="LightYellow"
• BorderBrush="SteelBlue" BorderThickness="3,5,3,5" CornerRadius="3"
• VerticalAlignment="Top">
– <StackPanel>
• <Button Margin="3">One</Button>
• <Button Margin="3">Two</Button>
• <Button Margin="3">Three</Button>
– </StackPanel>
• </Border>
29. TextBox and Label
<Window x:Class="TextBoxDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TextBox Demo"
Height="200"
Width="250">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="Enter some text" Margin="5"/>
<TextBox Grid.Row="1" Name="MyTextBox" Margin="5"/>
<Button Grid.Row="2" Content="OK" Margin="5"/>
<Label Grid.Row="3" Name="MyLabel" Margin="5"/>
</Grid>
</Window>
private void Button_Click(object sender, RoutedEventArgs e)
{
MyLabel.Content = MyTextBox.Text;
}
30. TextBox and Label
<Window x:Class="LabelDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Label Demo"
Width="250"
Height="150">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="First Name" Margin="4"/>
<TextBox Grid.Column="1" x:Name="FirstName" Margin="4"/>
<Label Grid.Row="1" Content="Last Name" Margin="4"/>
<TextBox Grid.Row="1" Grid.Column="1" x:Name="LastName" Margin="4"/>
<StackPanel Grid.Row="2" Grid.ColumnSpan="2"
Orientation="Horizontal"
HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Button Content="OK" Width="60" Margin="4"/>
<Button Content="Cancel" Width="60" Margin="4"/>
</StackPanel>
</Grid>
</Window>
31. RichTextBox
control has a similar appearance to a standard TextBox. However, where TextBoxes only permit you to edit plain
text, RichTextBoxes allow you to create complex documents with font and paragraph formatting, page layout
options and inserted elements, such as images.
34. RadioButton Groups
• To group a set of RadioButton controls, you set the GroupName property to
a string value. All of the radio buttons with the same group name are linked but
are not connected to controls in other groups.
<RadioButton Grid.Row="0" GroupName="Handed">Left Handed</RadioButton>
<RadioButton Grid.Row="1" GroupName="Handed" IsChecked="True">Right Handed</RadioButton>
<RadioButton Grid.Row="2" GroupName="Speed" IsChecked="True">Fast Double-Click</RadioButton>
<RadioButton Grid.Row="3" GroupName="Speed">Slow Double-Click</RadioButton>
38. TabControl
<TabItem Header="Employee">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Margin="5">First Name</Label>
<TextBox Grid.Column="1" Margin="5"/>
<Label Grid.Row="1" Margin="5">Last Name</Label>
<TextBox Grid.Row="1" Grid.Column="1" Margin="5"/>
</Grid>
</TabItem>
<TabItem Header="Salary">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Margin="5">Schedule</Label>
<ComboBox Grid.Column="1" Margin="5">
<ComboBox.Items>
<ComboBoxItem>Annually</ComboBoxItem>
<ComboBoxItem>Monthly</ComboBoxItem>
</ComboBox.Items>
</ComboBox>
<Label Grid.Row="1" Margin="5">Amount</Label>
<TextBox Grid.Row="1" Grid.Column="1" Margin="5"/>
</Grid>
</TabItem>
39. ToolBar
<Window x:Class="ToolBarDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar Demo"
Height="200"
Width="450">
<DockPanel Background="Gray">
<ToolBar DockPanel.Dock="Top" Height="28">
<Button><Image Source="/Icons/New.png"/></Button>
<Button><Image Source="/Icons/Open.png"/></Button>
<Button><Image Source="/Icons/Save.png"/></Button>
<Button><Image Source="/Icons/Print.png"/></Button>
<Button><Image Source="/Icons/Email.png"/></Button>
<Button><Image Source="/Icons/Cut.png"/></Button>
<Button><Image Source="/Icons/Copy.png"/></Button>
<Button><Image Source="/Icons/Paste.png"/></Button>
<ToggleButton Width="20" FontWeight="Bold">B</ToggleButton>
<ToggleButton Width="20" FontStyle="Italic">I</ToggleButton>
<Button><Image Source="/Icons/Left.png"/></Button>
<Button><Image Source="/Icons/Centre.png"/></Button>
<Button><Image Source="/Icons/Right.png"/></Button>
<Button><Image Source="/Icons/FullScreen.png"/></Button>
<Button><Image Source="/Icons/Help.png"/></Button>
</ToolBar>
<TextBox TextWrapping="Wrap"/>
</DockPanel>
</Window>|
44. ProgressBar
< Button Width="25" Height="25">-</ Button >
< Button Width="25" Height="25" Grid.Column="1">+</ Button >
<Button Width="25" Height="25" Grid.Column="2">?</Button>
<ProgressBar Name="Progress"
Grid.Row="1"
Grid.ColumnSpan="3"
Height="25"/>
<Label Name="ProgressText"
Content="0"
HorizontalAlignment="Center"
Grid.Row="1"
Grid.Column="1"/>
private void Decrement_Click(object sender, RoutedEventArgs e)
{
if (Progress.Value > 0)
{
Progress.Value--;
}
SetProgressText();
}
private void Increment_Click(object sender, RoutedEventArgs e)
{
if (Progress.Value < 100)
{
Progress.Value++;
}
SetProgressText();
}
private void SetProgressText()
{
ProgressText.Content = Progress.Value;
}
49. SaveFileDialog
private void SaveButton_Click(object sender, EventArgs e)
{
using (SaveFileDialog sfd = new SaveFileDialog())
{
if (sfd.ShowDialog() == DialogResult.OK)
{
SaveFile(sfd);
}
}
}
private void SaveFile(SaveFileDialog sfd)
{
string path = sfd.FileName;
File.WriteAllText(path, TextInput.Text);
}
50. OpenFileDialog
private void OpenButton_Click(object sender, EventArgs e)
{
using (OpenFileDialog ofd = new OpenFileDialog())
{
if (ofd.ShowDialog() == DialogResult.OK)
{
ShowFileDetails(ofd);
}
}
}
private void ShowFileDetails(OpenFileDialog ofd)
{
FileList.Items.Clear();
FileList.Items.Add(ofd.FileName);
}
private void SaveButton_Click(object sender, EventArgs e)
{
using (SaveFileDialog sfd = new SaveFileDialog())
{
if (sfd.ShowDialog() == DialogResult.OK)
{
SaveFile(sfd);
}
}
}
private void SaveFile(SaveFileDialog sfd)
{
string path = sfd.FileName;
File.WriteAllText(path, TextInput.Text);
}
SaveFileDialog OpenFileDialog