WPF-布局样式练习-Day01-阿里云开发者社区

WPF-布局样式练习-Day01

2023-08-11 135

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： WPF-布局样式练习-Day01

一、前言

WPF日常布局样式练习案例，记录自己在WPF的复习过程中的亿点点进步，同时分享出来，希望对学习WPF的读者们，提供一点帮助。

二、模仿

2.1 原始设计图

2.2 模仿分析

此处使用的工具为PxCook，需要注意的是，此处标注的是像素点，而默认情况下，WPF是相对范围内的像素无关，模仿阶段，不考虑到像素级别的模仿细节处理，后续文章会单独讲解。

2.3 动起来

1）系统资源

<Window.Resources>
        <GeometryGroup x:Key="shishi"></GeometryGroup>
        <GeometryGroup x:Key="bingren"></GeometryGroup>
        <GeometryGroup x:Key="chuangwei"></GeometryGroup>
        <GeometryGroup x:Key="yihu"></GeometryGroup>
        <GeometryGroup x:Key="baobiao"></GeometryGroup>
        <GeometryGroup x:Key="shebei"></GeometryGroup>
        <GeometryGroup x:Key="xitong"></GeometryGroup>
        <!--#region ListViewItem 模板 -->
        <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type ListViewItem}">
            <!--需要给根容器添加背景色用于捕获事件-->
            <Grid Background="Transparent" SnapsToDevicePixels="True">
                <Border x:Name="Bg" Background="{TemplateBinding Background}"></Border>
                <Border Padding="{TemplateBinding Padding}">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                        <Path Fill="{TemplateBinding Foreground}" Stretch="Uniform" Width="12.8" Height="12.8"
                                           Margin="11.2,12.8" Data="{TemplateBinding local:ControlExtensions.Data}">
                        </Path>
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"></ContentPresenter>
                    </StackPanel>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="ListViewItem.IsSelected" Value="True">
                    <Setter Property="Background" TargetName="Bg" Value="#50BEE9D4"></Setter>
                    <Setter Property="BorderBrush" TargetName="Bg" Value="#1EA64A"></Setter>
                    <Setter Property="BorderThickness" TargetName="Bg" Value="0,0,4,0"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <!--#endregion-->
        <!--#region ListViewItem默认样式 -->
        <Style TargetType="ListViewItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Padding" Value="30.4,0"/>
            <Setter Property="FontSize" Value="12.8"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="local:ControlExtensions.Data" Value="{StaticResource shishi}"/>
            <Setter Property="Template" Value="{StaticResource ButtonTemplate}"/>
            <Style.Triggers>
                <Trigger Property="ListViewItem.IsSelected" Value="True">
                    <Setter Property="Foreground" Value="#11B15F"/>
                    <Setter Property="Background" Value="#50BEE9D4"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <!--#endregion-->
    </Window.Resources>

2）设置布局

<!--整体布局-->
    <DockPanel>
        <Border DockPanel.Dock="Left" Grid.ColumnSpan="2" Width="164" Background="White">
            <Border.Effect>
                <DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="10" Opacity="0.8" RenderingBias="Quality"></DropShadowEffect>
            </Border.Effect>
            <StackPanel>
                <!--显示内容-->
                <StackPanel HorizontalAlignment="Center" Margin="0,41.6,0,0">
                </StackPanel>
                <!--#region 侧面菜单 -->
                <!--#endregion-->
            </StackPanel>
        </Border>
        <!--右侧内容-->
        <DockPanel>
            <StackPanel DockPanel.Dock="Top" Background="White" Margin="3.2,0,0,0">
                <!--#region 右侧顶部导航内容 -->
                <Border BorderBrush="#f1f2f3" Padding="0,20.8,1.6,12.8" Margin="17.6,0,0,0" BorderThickness="0,0,0,1">
                    <WrapPanel>
                        <!--右侧顶部导航内容-->
                    </WrapPanel>
                </Border>
                <!--#endregion-->
                <Border Height="52.8" Padding="17.6,12.8,0,0">
                    <DockPanel>
                        <StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
                            <!--#region 显示按钮 -->
                            <!--#endregion-->
                        </StackPanel>
                        <TextBlock Text="患者体温监测数据详情" Foreground="Black" FontWeight="Black" FontSize="16"></TextBlock>
                    </DockPanel>
                </Border>
            </StackPanel>
            <Border Padding="19.2,19.2,19.2,38.4">
                <DockPanel>
                    <!--#region 患者基本信息 -->
                    <Border DockPanel.Dock="Left" Width="210" HorizontalAlignment="Left" Background="White" CornerRadius="5" Padding="16">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality"></DropShadowEffect>
                        </Border.Effect>
                    </Border>
                    <!--#endregion-->
                    <!--#region 历史体温数据 -->
                    <Border Width="260" DockPanel.Dock="Right" 
                            HorizontalAlignment="Right" 
                            Background="White" CornerRadius="5" Padding="16">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality"></DropShadowEffect>
                        </Border.Effect>
                    </Border>
                    <!--#endregion-->
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="14*"></RowDefinition>
                            <RowDefinition Height="9*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <!--#region 体温监测详情 -->
                        <Border Background="White" CornerRadius="5" Padding="16" Margin="16,0,16,8">
                            <Border.Effect>
                                <DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality"></DropShadowEffect>
                            </Border.Effect>
                        </Border>
                        <!--#endregion-->
                        <!--#region 历史体温数据 -->
                        <Border Grid.Row="1" Background="White" CornerRadius="5" Padding="16" Margin="16,8,16,0">
                            <Border.Effect>
                                <DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality"></DropShadowEffect>
                            </Border.Effect>
                        </Border>
                        <!--#endregion-->
                    </Grid>
                </DockPanel>                
            </Border>
        </DockPanel>
    </DockPanel>

3）左侧内容

显示内容

<StackPanel HorizontalAlignment="Center" Margin="0,41.6,0,0">
    <TextBlock Text="15:36:06" DockPanel.Dock="Top" FontSize="24" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Center"></TextBlock>
    <TextBlock Text="2020年5月20日 星期三" Margin="0,12.8" HorizontalAlignment="Center" Foreground="LightGray"/>
</StackPanel>

侧面菜单

<!--#region 侧面菜单 -->
<ListView SelectedIndex="0" BorderThickness="0">
    <ListViewItem local:ControlExtensions.Data="{StaticResource bingren}" Content="病人管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource chuangwei}" Content="床位管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource yihu}" Content="医护管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource baobiao}" Content="报表管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource shebei}" Content="设备管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource xitong}" Content="系统设置"/>
    <ListView.Template>
        <ControlTemplate>
            <ItemsPresenter></ItemsPresenter>
        </ControlTemplate>
    </ListView.Template>
</ListView>

4）右侧内容

右侧顶部导航

<!--#region 右侧顶部导航内容 -->
<Border BorderBrush="#f1f2f3" Padding="0,20.8,1.6,12.8" Margin="17.6,0,0,0" BorderThickness="0,0,0,1">
    <WrapPanel>
        <!--右侧顶部导航内容-->
        <TextBlock Text="实时检测"></TextBlock>
        <TextBlock Text=" / "></TextBlock>
        <TextBlock Text="体温数据详情页" Foreground="#11B15F" FontWeight="Black"></TextBlock>
    </WrapPanel>
</Border>
<!--#endregion-->

显示按钮

<StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
    <!--#region 显示按钮 -->
    <Button Content="解绑" Width="49.6" Padding="12.8,6.4" Margin="0,0,12.8,0" FontSize="10" VerticalAlignment="Top">
                                <Button.Template>
                                    <ControlTemplate TargetType="Button">
                                        <Border BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="5" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                                            <ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
                                        </Border>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>
    <Button Content="导出" Width="49.6" Padding="12.8,6.4" Margin="0,0,12.8,0" 
                                    FontSize="10" 
                                    Background="#1EA64A" 
                                    BorderThickness="0"
                                    Foreground="White" VerticalAlignment="Top">
                                <Button.Template>
                                    <ControlTemplate TargetType="Button">
                                        <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" CornerRadius="5" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                                            <ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
                                        </Border>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>
    <!--#endregion-->
</StackPanel>

面板展示

对于右侧的内容展示板，此处基本布局一致，统一如下，依据实际情况对Border的属性Padding、DockPanel.Dock、Width 、HorizontalAlignment进行调整即可。

<!--#region 患者基本信息 -->
<Border Background="White" CornerRadius="5">
    <Border.Effect>
        <DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality"></DropShadowEffect>
    </Border.Effect>
    <DockPanel>
        <Border DockPanel.Dock="Top" Padding="0,0,0,10" BorderBrush="#f1f2f3" BorderThickness="0,0,0,1">
            <TextBlock Text="患者基本信息" FontWeight="Black" FontSize="14" Foreground="Black"></TextBlock>
        </Border>
        <ContentControl></ContentControl>
    </DockPanel>
</Border>
<!--#endregion-->

三、效果展示

需要对应源码，可以私信笔者，发送内容WPFDay1。

WPF-布局样式练习-Day01

一、前言

二、模仿

2.1 原始设计图

2.2 模仿分析

2.3 动起来

1）系统资源

2）设置布局

3）左侧内容

显示内容

侧面菜单

4）右侧内容

右侧顶部导航

显示按钮

面板展示

三、效果展示

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

WPF-布局样式练习-Day01

一、前言

二、模仿

2.1 原始设计图

2.2 模仿分析

2.3 动起来

1）系统资源

2）设置布局

3）左侧内容

显示内容

侧面菜单

4）右侧内容

右侧顶部导航

显示按钮

面板展示

三、效果展示

热门文章

最新文章

相关电子书

相关实验场景