在 WPF 中,布局管理器负责计算和安排控件在窗口中的位置和大小。以下是深入学习 WPF 布局需要了解的知识点:
布局容器:WPF 提供了多种布局容器,包括 Grid、StackPanel、WrapPanel、DockPanel 等等。每个布局容器都有自己的布局规则和属性。
布局属性:布局容器中的控件可以使用多种布局属性来控制它们在容器中的位置和大小。例如,Grid.Row 和 Grid.Column 属性可以指定控件所在的行和列;Margin 属性可以指定控件与容器边缘之间的距离。
自定义布局:除了 WPF 提供的布局容器,你还可以通过自定义布局来实现更高级的布局效果。这涉及到创建自定义控件和自定义布局管理器。
响应式布局:WPF 的布局系统支持响应式布局,可以根据窗口大小自动调整控件的位置和大小。你可以使用 VisualStateManager 和 AdaptiveTrigger 等技术来实现响应式布局。
布局性能优化:WPF 布局系统的性能会受到影响,特别是在大量控件和复杂布局的情况下。你可以使用一些技术来优化布局性能,例如使用 VirtualizingStackPanel 来延迟加载控件、使用缓存等。
数据绑定:WPF 的布局系统支持数据绑定,可以将控件与数据源进行绑定。这使得你可以动态地改变控件的位置、大小、内容等。你可以使用 Binding 和其他数据绑定技术来实现数据绑定。
以上是深入学习 WPF 布局需要了解的主要知识点。
通过实际例子深入学习某项技术是非常有用的。这可以帮助你更好地理解技术原理、掌握技术应用方法,并且在实际项目中更快地上手。
如果你正在学习 WPF布局知识点,可以通过下面这些实际例子来加深对该技术的理解
<Controls:MetroWindow x:Class="wp.popUC.pay"
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:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:local="clr-namespace:wp.popUC"
mc:Ignorable="d"
Title="请扫码支付" Height="538" Width="450" Background="White" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" Focusable="True" PreviewKeyDown="window_PreviewKeyDown">
<DockPanel>
<Grid DockPanel.Dock="Top" Height="120" Background="Wheat">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="22*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="35*" />
<ColumnDefinition Width="18*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="90" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Image Name="payIcon" Source="../img/aliPay.png" Height="70" Width="70" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" ></Image>
<Label Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" FontFamily="mono" FontSize="14" HorizontalAlignment="Center">还需支付金额:</Label>
<Label Name="payMoney" Grid.Row="0" Grid.Column="2" VerticalAlignment="Center" FontFamily="mono" FontWeight="Bold" FontSize="30" Foreground="Red" HorizontalAlignment="Center">0.00</Label>
<Label Grid.Row="0" Grid.Column="3" VerticalAlignment="Center" FontFamily="mono" FontSize="13" HorizontalAlignment="Left">元</Label>
<Label Name="payDesc" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" VerticalAlignment="Center" FontFamily="mono" FontSize="13" Foreground="#139AD4" FontWeight="Bold" HorizontalAlignment="Center">打 开 支 付 宝 [ 扫 一 扫 ]</Label>
</Grid>
<Label DockPanel.Dock="Bottom" Content="活动规则:活动期间内没人每天扫码可以获得双倍积分!所有门店均参与!" Height="50" Background="#DD4F43" Foreground="white" Width="450" ></Label>
<Canvas Background="White">
<Image Name="qrCode" Canvas.Left="110" Canvas.Top="30" Width="230" Height="230"></Image>
<Label Canvas.Left="105" Canvas.Top="280" Content="请抓紧时间扫码哦,即将关闭:"></Label>
<Label Name="lblSecond" Canvas.Left="285" Canvas.Top="266" Content="5" FontSize="30" FontWeight="Bold" Foreground="Red"></Label>
</Canvas>
</DockPanel>
</Controls:MetroWindow>
<Controls:MetroWindow x:Class="wp.popUC.discount"
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:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:local="clr-namespace:wp.popUC"
mc:Ignorable="d"
Title="折扣信息管理栏" Height="346" Width="480" Background="White" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" Focusable="True" PreviewKeyDown="window_PreviewKeyDown">
<Window.Resources>
<!---Button右边-->
<Style TargetType="Button" x:Key="TypeStyle">
<Setter Property="Background" Value="#139AD4"/>
<Setter Property="FontSize" Value="23"></Setter>
</Style>
</Window.Resources>
<Grid Background="Wheat">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="16*" />
<ColumnDefinition Width="16*" />
<ColumnDefinition Width="16*" />
<ColumnDefinition Width="16*" />
<ColumnDefinition Width="16*" />
<ColumnDefinition Width="10*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="10" />
<RowDefinition Height="45" />
<RowDefinition Height="45" />
<RowDefinition Height="45" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="7" Background="Wheat" Content="当前收银员没有(单笔议价/折扣权限),请输入授权码" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17"/>
<Label Grid.Row="1" Grid.Column="1" FontSize="13" Content="收银员编码" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
<TextBox Name="userName" Grid.Row="1" Grid.Column="2" Width="300" FontSize="21" Grid.ColumnSpan="4" HorizontalAlignment="Center" VerticalAlignment="Center" ></TextBox>
<Label Grid.Row="2" Grid.Column="1" Content="收银员口令" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
<PasswordBox Name="userPass" Grid.Row="2" Grid.Column="2" Width="300" FontSize="21" Grid.ColumnSpan="4" HorizontalAlignment="Center" VerticalAlignment="Center"></PasswordBox>
<Button Name="btn__" Grid.Row="4" Grid.Column="1" Content="-" Style="{StaticResource TypeStyle}" Click="btn___Click"></Button>
<Button Name="btn7" Grid.Row="4" Grid.Column="2" Content="7" Style="{StaticResource TypeStyle}" Click="btn7_Click"></Button>
<Button Name="btn8" Grid.Row="4" Grid.Column="3" Content="8" Style="{StaticResource TypeStyle}" Click="btn8_Click"></Button>
<Button Name="btn9" Grid.Row="4" Grid.Column="4" Content="9" Style="{StaticResource TypeStyle}" Click="btn9_Click"></Button>
<Button Name="del" Grid.Row="4" Grid.Column="5" Content="退格" Style="{StaticResource TypeStyle}" Background="White" Click="del_Click" ></Button>
<Button Name="btn_" Grid.Row="5" Grid.Column="1" Content="." Style="{StaticResource TypeStyle}" Click="btn__Click"></Button>
<Button Name="btn4" Grid.Row="5" Grid.Column="2" Content="4" Style="{StaticResource TypeStyle}" Click="btn4_Click"></Button>
<Button Name="btn5" Grid.Row="5" Grid.Column="3" Content="5" Style="{StaticResource TypeStyle}" Click="btn5_Click"></Button>
<Button Name="btn6" Grid.Row="5" Grid.Column="4" Content="6" Style="{StaticResource TypeStyle}" Click="btn6_Click"></Button>
<Button Name="cancel" Grid.Row="5" Grid.Column="5" Content="取消" Style="{StaticResource TypeStyle}" Background="#DE5347" Foreground="White" Click="cancel_Click" ></Button>
<Button Name="btn0" Grid.Row="6" Grid.Column="1" Content="0" Style="{StaticResource TypeStyle}" Click="btn0_Click"></Button>
<Button Name="btn1" Grid.Row="6" Grid.Column="2" Content="1" Style="{StaticResource TypeStyle}" Click="btn1_Click"></Button>
<Button Name="btn2" Grid.Row="6" Grid.Column="3" Content="2" Style="{StaticResource TypeStyle}" Click="btn2_Click"></Button>
<Button Name="btn3" Grid.Row="6" Grid.Column="4" Content="3" Style="{StaticResource TypeStyle}" Click="btn3_Click"></Button>
<Button Name="OK" Grid.Row="6" Grid.Column="5" Content="确认" Style="{StaticResource TypeStyle}" Background="#17A05E" Foreground="White" Click="OK_Click" ></Button>
</Grid>
</Controls:MetroWindow>