简单的响应式布局
程序员文章站
2024-03-20 15:25:28
...
WPF使用响应式布局有一个简单快捷的方式,那就是使用Grid网格布局,并且是按份数布局,而且Grid里面的标签也不能设置长宽高,只能不设置(也就是让它值为AUTO默认为跟随父元素大小),这样的话,当页面大小发生改变时,Grid网格式布局也会随之发生改变,缺点就不能使用网格式布局使用太过精细(复杂)的页面,只能布置一些简单点的页面
这里拿我做的一个登入窗口作为例子,布局很丑,望勿介意
这个窗口就是使用Grid网格按份数布局的,然后将那些个控件,全部按地方放进去.并且不设置宽高,让它随页面大小改变而改变,如图 我这里是直接定义的10个 然后将我想要显示的控件放进相对应的格子里,并且在那个格子里在细分出我想要将控件放置的地方
当然,也可以使用一点外边距来调整你控件的相对于父元素的位置,但是,Mgrin这东西可不能设置份数大小的,只能设置绝对的大小,所以当你窗口页面放大缩小比例不大的时候还好说,一旦当你放大缩小的比例很大的化,那页面可就乱套了,所以能不使用Mgrin就不要使用这东西,如果向要控件放的位置更理想一点,可以划分Grid时,划分更细一些就比如说下面的这个
z这样的布局简单是简单,缺点也很明,显,代码量有时候,确实有点大
这里给出登入页面的源代码
<Window.Resources>
<!--设置整个页面button属性-->
<Style TargetType="Button">
<!--设置字体颜色,值为Black-->
<Setter Property="Foreground" Value="Black" />
<!--修改模板属性 Template模板-->
<Setter Property="Template">
<Setter.Value>
<!--控件模板
(1)其实WPF的每一个控件都有一个默认的模板，该模板描述了控件的外观以及外观对外界刺激所做出的反应。
我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件
(2)与Style不同，Style只能改变控件的已有属性值（比如颜色字体）来定制控件，
但控件模板可以改变控件的内部结构（VisualTree，视觉树）来完成更为复杂的定制，
比如我们可以定制这样的按钮：在它的左办部分显示一个小图标而它的右半部分显示文本。
(3)要替换控件的模板，我们只需要声明一个ControlTemplate对象，并对该ControlTemplate对象做相应的配置，
然后将该ControlTemplate对象赋值给控件的Template属性就可以了
(4)ControlTemplate包含两个重要的属性：
1，VisualTree，该模板的视觉树，其实我们就是使用这个属性来描述控件的外观的
2，Triggers，触发器列表，里面包含一些触发器Trigger，我们可以定制这个触发器列表来使控件对外界的刺激发生反应，比如鼠标经过时文本变成粗体等。
重构模板-->
<ControlTemplate TargetType="Button">
<Border x:Name="back"
Opacity="0.8"
CornerRadius="9">
<Border.BitmapEffect>
<DropShadowBitmapEffect
Color="{Binding
RelativeSource={RelativeSource TemplatedParent},
Path=(Button.Background).(SolidColorBrush.Color)}"
Direction="20"
ShadowDepth="0"
Opacity="2"
Softness="0">
</DropShadowBitmapEffect>
</Border.BitmapEffect>
<Border.Background>
<!--使用LinearGradientBrush渐变画刷：定义一个渐变画刷，然后需要定义渐变颜色，颜色已直线形式渐变-->
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">
<GradientBrush.GradientStops>
<GradientStopCollection>
<!--GradientStop:定义渐变颜色与颜色渐变始点-->
<GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/>
<GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/>
<GradientStop Color="#FFF" Offset="1"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStop Color="#FF5D88C7" Offset="0.5"/>
<GradientStop Color="#FF4375BD" Offset="0.51"/>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<!--按钮内容-->
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.BitmapEffect>
<DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3" />
</ContentPresenter.BitmapEffect>
</ContentPresenter>
</Border>
</Border>
<!--定义视觉树_end
定义触发器-->
<ControlTemplate.Triggers>
<!--属性触发器： 鼠标移入移出-->
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!--依赖属性 Storyboard.TargetName-->
<DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />
<DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Softness)" />
<ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />
<DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(DropShadowBitmapEffect.Softness)" />
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--按钮按下弹起-->
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="3" Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<ColorAnimation To="#3AAA" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation To="#2111" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--按钮失效-->
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#B444"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:0.3" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<DoubleAnimation To="1" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />
<DoubleAnimation To="-135" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />
<ColorAnimation To="#FFF" Duration="0:0:0.3" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />
<ColorAnimation To="#D555" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
<ColorAnimation To="#CEEE" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation To="#CDDD" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />
<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<!--定义触发器_End-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--设置页面的TextBox属性-->
</Window.Resources>
<Grid SizeChanged="Grid_SizeChanged">
<Grid.Effect>
<DropShadowEffect Opacity="1" BlurRadius="100" Direction="0" ShadowDepth="0" RenderingBias="Performance"/>
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition Height="37*"/>
<RowDefinition Height="46*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="35*"/>
<RowDefinition Height="9*"/>
<RowDefinition Height="35*"/>
<RowDefinition Height="26*"/>
<RowDefinition Height="37*"/>
<RowDefinition Height="27*"/>
</Grid.RowDefinitions>
<Image Source="Images/MainWindow/untitled.png" Grid.RowSpan="10" Stretch="Fill"></Image>
<Grid Grid.Row="1" IsEnabled="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<!--Train ticketing System backstage-->
<TextBox x:Name="Text_Dynacomm"
Tag="Text_Dynacomm"
Grid.Column="1"
Grid.ColumnSpan="1"
Text="火车售票系统后台_瞎改版"
FontFamily="华文行楷"
FontWeight="Bold"
TextAlignment="Center"
IsEnabled="True"
Background="{x:Null}"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
SizeChanged="T_Dynacomm_SizeChanged" BorderBrush="{x:Null}" SelectionBrush="{x:Null}"
>
<TextBox.Foreground>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFA6FFFA" Offset="0"/>
<GradientStop Color="#FF008BFC" Offset="1"/>
</LinearGradientBrush>
</TextBox.Foreground>
<TextBox.Effect>
<DropShadowEffect Color="#FFD1D1D1" BlurRadius="3" ShadowDepth="2" Opacity="0.5" />
</TextBox.Effect>
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FF5BF3F0" Offset="0"/>
<GradientStop Color="#FF7FAFF6" Offset="1"/>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBox>
</Grid>
<Grid Grid.Row="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="45*"/>
<ColumnDefinition Width="15*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="Text_EnglishDynacomm"
Tag="Text_EnglishDynacomm"
Grid.Column="1"
Text="Train ticketing System backstage"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
FontFamily="Vivaldi" Background="{x:Null}" BorderBrush="{x:Null}" SelectionBrush="{x:Null}"
>
<TextBox.Foreground>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0.5">
<GradientStop Color="#FFFF0900" Offset="0"/>
<GradientStop Color="#FFE200FF" Offset="1"/>
<GradientStop Color="#FFEBFF00" Offset="0.208"/>
<GradientStop Color="#FF82F316" Offset="0.42"/>
<GradientStop Color="#FF13F9B3" Offset="0.654"/>
</LinearGradientBrush>
</TextBox.Foreground>
</TextBox>
</Grid>
<Grid Grid.Row="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="27*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="Text_Account"
Tag="Text_Account"
Text="账号:"
Grid.Column="1"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
FontFamily="楷体"
FontWeight="Bold"
Background="{x:Null}"
CaretBrush="#FFD74646"
SelectionBrush="#FF266190"
BorderBrush="{x:Null}" Foreground="White"
>
</TextBox>
<TextBox x:Name="TB_Account"
Tag="TB_Account"
Text="LS007"
MouseEnter="TB_Account_MouseEnter"
Grid.Column="2"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Left"
Foreground="Gray"
TextWrapping="NoWrap"
AcceptsReturn="True" Opacity="0.7"
>
<TextBox.Effect>
<DropShadowEffect Color="#FF55FFD1" BlurRadius="315" ShadowDepth="0" Direction="314"/>
</TextBox.Effect>
</TextBox>
</Grid>
<Grid Grid.Row="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="27*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="Text_Password"
Tag="Text_Password"
Text="密码:"
Grid.Column="1"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
FontFamily="楷体"
FontWeight="Bold"
Background="{x:Null}"
CaretBrush="#FFD74646"
SelectionBrush="#FF266190"
BorderBrush="{x:Null}" Foreground="White"
>
</TextBox>
<PasswordBox x:Name="TB_Password"
Tag="TB_Password"
Grid.Column="2"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Left"
Foreground="Gray" Opacity="0.7"
Password="990"
>
</PasswordBox>
</Grid>
<!--登入登出按钮部分-->
<Grid Grid.Row="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="45*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="45*"/>
<ColumnDefinition Width="15*"/>
</Grid.ColumnDefinitions>
<Button x:Name="B_Login"
Tag="B_Login"
Content="Login"
FontFamily="Vivaldi"
Foreground="AliceBlue"
Background="SkyBlue"
Grid.Column="1"
Click="B_Login_Click">
</Button>
<Button x:Name="B_Exit"
Tag="B_Exit"
Grid.Column="3"
Content="Exit"
FontFamily="Vivaldi"
Foreground="AliceBlue"
Background="SkyBlue"
Click="B_Exit_Click"></Button>
</Grid>
</Grid>
上一篇： 一个完整的Flexbox指南
下一篇： EasyExcel读写Excel文件