WPF布局、样式

常用的布局属性

• HorizontalAlignmeng：用于设置元素的水平位置
• VerticalAlignment：用于设置元素的垂直位置
• Margin：指定元素与容器的边距
• Height：指定元素的高度
• Width：指定元素的宽度
  • 按比例分法：Width = “2*” Width = “1*”(这个x*是每分的内容必写部分)
  • 自动分配空间：Width = “AUTO”
• WinHeight/WinWidth：指定元素的最小高度和宽度
• MaxHeight/MaxWidth：指定元素的最大高度和宽度
• Padding：指定元素内部边距

<Grid >
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Border Background="#F26321" Margin="5"/>
        <Border Background="#8CC43D" Grid.Column="1" Margin="5"/>
        <Border Background="#00ABED" Grid.Row="1" Margin="5"/>
        <Border Background="#EFB707" Grid.Row="1" Grid.Column="1" Margin="5"/>
    </Grid>

---

控件样式 继承

<Window.Resources>
        <Style x:Key="BaseStyle" TargetType="Button">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Foreground" Value="Red"/>
        </Style>

		// BasedOn 沿用之前的
        <Style x:Key="style1" TargetType="Button" BasedOn="{StaticResource BaseStyle}">
            <Setter Property="Content" Value="Hello"/>
        </Style>
    </Window.Resources>


    <Grid >
        <StackPanel>
            <Button Style="{StaticResource style1}"/>
            <Button/>
            <Button/>
            <Button/>
            <Button/>
        </StackPanel>
    </Grid>

---

页面布局

<Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Border Background="#7671D8"/>

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Border Background="Blue"/>

            <Grid Grid.Column="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="0.8*"/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>

                <Border Margin="5" Background="#7671D8"/>
                <Border Margin="5" Grid.Column="1" Background="#4C9ECD"/>
                <Border Margin="5" Grid.Column="2" Background="#D970CF"/>
                <Border Margin="5" Grid.Column="3" Background="#5AC4B6"/>
                <Border Margin="5" Grid.Column="4" Background="#D9707F"/>

                <Border Grid.Row="1" Grid.ColumnSpan="3" Margin="5" Background="Red"/>
                <Border Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" Margin="5" Background="Yellow"/>
                <Border Grid.Row="2" Grid.ColumnSpan="3" Margin="5" Background="Blue"/>
                <Border Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2" Margin="5" Background="Green"/>
            </Grid>
        </Grid>
    </Grid>

---

style的使用：资源字典
首先需要创建资源字典：BaseButtonStyle.xmal

<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 Property="FontSize" Value="20"/>
        <Setter Property="Margin" Value="20,10"/>
    </Style>

    <Style x:Key="LoginStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="Green"/>
    </Style>

    <Style x:Key="QuitStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="Red"/>
    </Style>
</ResourceDictionary>

在app.xaml里配置文件

<Application x:Class="WPF_Study.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WPF_Study"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/WPF_Study;component/BaseButtonStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

最后直接写xaml

<Window x:Class="WPF_Study.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_Study"
        mc:Ignorable="d"
        Title="WPF入门.txt" Height="450" Width="800">


    <StackPanel>
        <Button Style="{StaticResource LoginStyle}" Content="登录"/>
        <Button Style="{StaticResource QuitStyle}" Content="退出"/>
        <Button Content="忘记密码"/>
        <Button Content="忘记密码"/>
    </StackPanel>
</Window>