HorizontalAlignment="Center" //水平方向的居中对齐
VerticalAlignment="Center" //竖直方向的居中对齐
xml:space="preserve" //保留原格式(不添加这个属性想显示多空格时只会显示单空格)
Margin="10,10,10,10" //边框
Orientation="Horizontal" //用于容器使标签水平排布
事件
要使用控件的时候别忘了给控件起名
x:Name=""
ValueChanged //值改变触发事件 Slider
TextChanged //数据改变触发事件 Text
Click //点击事件 butten
样式
Style的作用是给控件属性重用,当很多组件的属性一致时,只需要用同一个样式就可以了
<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">
//TargetType 要给控件的类型
//x:Key 要添加样式的控件绑定这个key,如果不写这个key默认全局butten都使用这个样式
//样式之间可以相互继承
<Window.Resources>
<Style TargetType="Button" x:Key="BaseButtonStyle">
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="Black"/>
</Style>
<Style TargetType="Button" x:Key="ButtonStyle" BasedOn="{StaticResource BaseButtonStyle}">
<Setter Property="Content" Value="Butten"/>
</Style>
</Window.Resources>
<StackPanel>
<Button Style="{StaticResource ButtonStyle}"></Button>
<Button Style="{StaticResource ButtonStyle}"></Button>
<Button Style="{StaticResource ButtonStyle}"></Button>
<Button Style="{StaticResource ButtonStyle}"></Button>
<Button Style="{StaticResource ButtonStyle}"></Button>
<Button Style="{StaticResource ButtonStyle}"></Button>
</StackPanel>
</Window>
容器
Border:经常配合容器一起使用,作用是给元素添加边框
<Window x:Class="Wpf_Panel.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:Wpf_Panel"
mc:Ignorable="d"
Title="MainWindow" Height="500" Width="800">
<StackPanel>
<!--BorderBrush用来设置颜色-->
<!--BorderThickness用来设置宽度-->
<!--CornerRadius设置圆角-->
<!--Padding设置边框和里面元素的间距-->
<!--Margin设置边框和其他临近元素的间距-->
<!--Background则是设置border所有内容的颜色-->
<Border Background="Bisque" BorderBrush="Coral" BorderThickness="3">
<Button Content="Button A" Width="120"/>
</Border>
<Border BorderBrush="Red" BorderThickness="3" Margin="5">
<Button Content="Button B"/>
</Border>
<Border BorderBrush="DarkRed" BorderThickness="3" Background="Red" Padding="5">
<Button Content="Button C"/>
</Border>
</StackPanel>
<!--<Grid>
</Grid>-->
</Window>
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 >
//三种布局方式 1、自适应布局 2、绝对布局 3、按比例布局
//Grid.Row:当前控件所在行
//Grid.Column:当前控件所在列
//Grid.ColumnSpan:元素跨列,自Grid.Column起的几格
//Grid.RowSpan:元素跨行,自Grid.Row起的几格
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="180"/>
</Grid.RowDefinitions >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Border Background="BlueViolet" Grid.Row="0" Grid.Column="0">
<Button Content="123" Height="50" Width="100"></Button>
</Border>
<Border Background="Gainsboro" Grid.Row="0" Grid.Column="1"></Border>
<Border Background="Brown" Grid.Row="1" Grid.Column="0"></Border>
<Border Background="Green" Grid.Row="1" Grid.Column="1"></Border>
<Border Background="Beige" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
</Border>
</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">
//Orientation="Horizontal" 水平排布
//Orientation="Vertical" 竖直排布
<StackPanel Orientation="Horizontal">
<Button Width="100" Height="40"></Button>
<Button Width="100" Height="40"></Button>
<Button Width="100" Height="40"></Button>
<Button Width="100" Height="40"></Button>
<Button Width="100" Height="40"></Button>
<Button Width="100" Height="40"></Button>
<Button Width="100" Height="40"></Button>
</StackPanel>
</Window>
WrapPanel:可换行的行中放置元素(就是StackPanel 的自动换行版,摆不下的元素不会不显示而是自动换行),在水平方向上从左向右放置元素,换行后也是从左向右。在垂直方向上,从上到下放置元素,在切换列后也是从上到下。
DockPanel: 停靠面板,根据容器的整个边界调整元素。
<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">
//属性
//LastChildFill="False" 如果值为true,最后一个控件会充满容器剩下的空间
//DockPanel.Dock 空间在哪个方向停靠
<DockPanel LastChildFill="False">
<Button Width="100" Height="40" DockPanel.Dock="Left"></Button>
<Button Width="100" Height="40" DockPanel.Dock="Right"></Button>
<Button Width="100" Height="40" DockPanel.Dock="Bottom"></Button>
<Button Width="100" Height="40" DockPanel.Dock="Top"></Button>
<Button Width="100" Height="40"></Button>
</DockPanel>
</Window>
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">
//属性
//Columns 分为多少行
//Rows 分为多少列
<UniformGrid Columns="3" Rows="3">
<Button></Button>
<Button></Button>
<Button></Button>
<Button></Button>
<Button></Button>
<Button></Button>
<Button></Button>
<Button></Button>
<Button></Button>
</UniformGrid>
</Window>
Canvas:使用固定坐标绝对定位元素。
ScrollViewer:通过添加滚动条可以使当前过长布局内的内容纵向或者横向滚动。再有限的区域内可以通过滚动呈现更多的内容。