当前位置：首页 > news >正文

XAML笔记

news 来源：原创 2024/5/14 6:49:44

HorizontalAlignment="Center" //水平方向的居中对齐

VerticalAlignment="Center" //竖直方向的居中对齐

xml:space="preserve" //保留原格式（不添加这个属性想显示多空格时只会显示单空格）

Margin="10,10,10,10" //边框

Orientation="Horizontal" //用于容器使标签水平排布

事件

要使用控件的时候别忘了给控件起名

x:Name=""

ValueChanged //值改变触发事件 Slider

TextChanged //数据改变触发事件 Text

绑定

在触发事件中把各个控件和函数建立关系太过于麻烦，可以尝试使用绑定的方式。

控件与控件的绑定

<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">
   
       
    
    <StackPanel>
        <Button Width="100" Height="40" />
        <Slider x:Name="slider"/>
        <TextBox  Height="40" Text="{Binding ElementName=slider,//要绑定的控件名
                                     Path=Value,                //要绑定控件的部位
                                     Mode=TwoWay             //绑定模式：
                                     }"/>                     TwoWay 双向绑定  
                                                              OneWay 单向绑定
                                                      OneWayToSource 相反的单向绑定
                                                              OneTime 绑定的第一次 
    </StackPanel>
</Window>

控件和属性的绑定

1、创建一个类

internal class Students
{
    private string _name;
    public string Name { get => _name; set => _name = value; }
}

2、在MainWindow中给属性赋给面板

public partial class MainWindow : Window
{
    MainWindow()
    {
        InitializeComponent();
        this.DataContext = new Students() { Name="文豪" };
    }
}

3、xaml

<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">



    <StackPanel>
        <TextBox  Height="40" Text="{Binding Name}" TextChanged="TextBox_TextChanged"/>
    </StackPanel>
</Window>

样式

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:通过添加滚动条可以使当前过长布局内的内容纵向或者横向滚动。再有限的区域内可以通过滚动呈现更多的内容。