C# WPF布局

布局：

1、Grid:

<Window x:Class="WpfApp2.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:WpfApp2"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Grid Margin="0,0,12,0">

<!--布局容器-->

<Grid.RowDefinitions>

<!--定义它的行以及它的高度-->

<RowDefinition Height="40"></RowDefinition>

<RowDefinition Height="Auto"></RowDefinition>

<RowDefinition Height="2*"></RowDefinition>

<RowDefinition Height="*"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<!--定义它的列以及它的宽度-->

<ColumnDefinition Width="200"></ColumnDefinition>

<ColumnDefinition Width="200"></ColumnDefinition>

<ColumnDefinition Width="200"></ColumnDefinition>

<ColumnDefinition Width="200"></ColumnDefinition>

</Grid.ColumnDefinitions>

<Button Grid.Row="0" Grid.Column="2" Content="button1"></Button>

<!--第0行第二列-->

<Button Grid.Row="0" Grid.Column="1" Content="button3"></Button>

<!--第0行第1列-->

<Button Grid.Row="1" Content="button2"></Button>

<!--第一行-->

<Button Grid.Row="2" Content="button4"></Button>

<!--//第二行-->

<Button Grid.Row="3" Content="button5"></Button>

<!--//第三行-->

</Grid>

</Window>

StackPanel:按行按列排序

<Window x:Class="WpfApp2.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:WpfApp2"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

2、 <Grid>

<StackPanel Name="Stcak1" Orientation="Horizontal">

<Button Content="button1"/>

<Button Content="button2"/>

</StackPanel>

<StackPanel x:Name="Stack2" Orientation="Vertical">

<Button Content="button3"></Button>

<Button Content="button4"></Button>

<Button Content="button5"></Button>

</StackPanel>

<StackPanel Name="stack3" Orientation="Horizontal" FlowDirection="RightToLeft">

<Button Content="button6"></Button>

<Button Content="button7"></Button>

</StackPanel>

</Grid>

3、WrapPanel://自动换行环列

<Window x:Class="WpfApp2.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:WpfApp2"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<WrapPanel Orientation="Horizontal">

<Button Content="button 150" Width="150"></Button>

<Button Content="button 200" Width="200"></Button>

<Button Content="button 150" Width="150"></Button>

<Button Content="button 200" Width="200"></Button>

<Button Content="button 150" Width="150"></Button>

</WrapPanel>

</Window>

DockPanel:

<DockPanel>

<Button Content="左" DockPanel.Dock="Left"></Button>

<Button Content="下" DockPanel.Dock="Bottom" ></Button>

<Button Content="右" DockPanel.Dock="Right"></Button>

<Button Content="上" DockPanel.Dock="Top" ></Button>

</DockPanel>

4、UniformGrid://按照输入顺序排列到容器当中

<UniformGrid >

<Button Content="Button"></Button>

<Button Content="Button1"></Button>

<Button Content="Button2"></Button>

<Button Content="Button3"></Button>

<Button Content="Button4"></Button>

</UniformGrid>

<Window x:Class="WpfApp2.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:WpfApp2"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Grid>

<Canvas>

<Button Content="Button1" Canvas.Left="50" Canvas.Top="50"></Button>

<Button Content="Button2" Canvas.Right="50" Canvas.Top="50" ></Button>

<Button Content="Button3" Canvas.Left="50" Canvas.Bottom="50" ></Button>

<Button Content="Button3" Canvas.Left="50" Canvas.Bottom="50" ></Button>

</Canvas>

</Grid>

</Window>

ScrollViewer：滑动框

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

<Button Content="Button" Width="800" Height="800"></Button>

</ScrollViewer>

ViewBox：

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Viewbox Grid.Row="0" Grid.Column="0" Stretch="None">

<Button Width="100" Height="50" Content="None"></Button>

</Viewbox>

<Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform">

<Button Width="100" Height="50" Content="Uniform"></Button>

</Viewbox>

</Grid>

样式：

内部样式：

<Window x:Class="WpfApp2.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:WpfApp2"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Window.Resources>

<Style TargetType="Button">/设置样式的类型，全局样式

<Setter Property="Background" Value="WhiteSmoke"></Setter>//设置背景属性的样式

<Setter Property="FontSize" Value="20"></Setter>//设置文本字体的样式

<Setter Property="Margin" Value="10, 20"></Setter>//设置边框的外部样式

</Style>

<Style x:Key="loginStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">//绑定单个样式

<Setter Property="Background" Value="CadetBlue"></Setter>

</Style>

</Window.Resources>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Button Style="{StaticResource loginStyle}" Content="Button1" Grid.Column="0" Grid.Row="1" Width="Auto" Height="Auto" ></Button>

<Button Content="Button1" Grid.Column="0" Grid.Row="2" Width="Auto" Height="Auto" ></Button>

<Button Content="Button1" Grid.Column="0" Grid.Row="0" Width="Auto" Height="Auto" ></Button>

</Grid>

</Window>

外部样式：

首先创建一个xaml文件

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Style TargetType="Button">

<Setter Property="Background" Value="WhiteSmoke"></Setter>

<Setter Property="FontSize" Value="20"></Setter>

<Setter Property="Margin" Value="10, 20"></Setter>

</Style>

<Style x:Key="loginStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">

<Setter Property="Background" Value="CadetBlue"></Setter>

</Style>

</ResourceDictionary>

然后在App.xaml种添加

引用路径

<Application x:Class="WpfApp2.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:WpfApp2"

StartupUri="MainWindow.xaml">

<Application.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="/WpfApp2;component/Dictionary1.xaml"/>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

<Window x:Class="WpfApp2.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:WpfApp2"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Button Style="{StaticResource loginStyle}" Content="Button1" Grid.Column="0" Grid.Row="1" Width="Auto" Height="Auto" ></Button>

<Button Content="Button1" Grid.Column="0" Grid.Row="2" Width="Auto" Height="Auto" ></Button>

<Button Content="Button1" Grid.Column="0" Grid.Row="0" Width="Auto" Height="Auto" ></Button>

</Grid>

</Window>

自定义样式模板及触发器

<Window x:Class="WpfApp2.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:WpfApp2"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Grid>

<Button Content="自定义按钮" Height="100" Width="200" Background="#0078d4" FontSize="50" Foreground="WhiteSmoke" BorderBrush="Aqua" BorderThickness="1">

<Button.Template>

<ControlTemplate TargetType="{x:Type Button}">

<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="20">

<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Border>

</ControlTemplate>

</Button.Template>

</Button>

</Grid>

</Window>

<Window x:Class="WpfApp2.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:WpfApp2"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Grid>

<Button Content="自定义按钮" Height="100" Width="200" Background="#0078d4" FontSize="50" Foreground="WhiteSmoke" BorderBrush="Aqua" BorderThickness="1">

<Button.Template>

<ControlTemplate TargetType="{x:Type Button}">

<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="20">

<TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Border>

</ControlTemplate>

</Button.Template>

</Button>

</Grid>

</Window>

触发器绑定：

<Window x:Class="WpfApp2.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:WpfApp2"

mc:Ignorable="d"

Title="MainWindow" Height="450" Width="800">

<Grid>

<Button Content="自定义按钮" Height="100" Width="200" Background="#0078d4" FontSize="50" Foreground="WhiteSmoke" BorderBrush="Aqua" BorderThickness="1">

<Button.Template>

<ControlTemplate TargetType="{x:Type Button}">

<Border x:Name="boder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="20">

<TextBlock x:Name="txt" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="true">//绑定鼠标移动

<Setter TargetName="boder" Property="Background" Value="Blue"/>

<Setter TargetName="txt" Property="FontSize" Value="20"/>

</Trigger>

<Trigger Property="IsPressed" Value="true">//绑定鼠标点下去的

<Setter TargetName="txt" Property="Background" Value="red"/>

<Setter TargetName="txt" Property="FontSize" Value="20"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Button.Template>

</Button>

</Grid>

</Window>