当前位置:网站首页 / wpf in net6 / 正文

ay wpf in net6 第9天 - 练手项目UI案例1 第1-10步

时间:2022年05月21日 | 作者 : aaronyang | 分类 : wpf in net6 | 浏览: 54次 | 评论 0

总效果预览

image.png



新建wpf net6项目

image.png


1 圆角窗体

窗体 WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Background="Transparent"

<Window x:Class="AyUIDemo1.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:AyUIDemo1" 
        mc:Ignorable="d" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" Background="Transparent"
        Title="www.ayjs.net" Height="740" Width="1280">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=" 250"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!--左菜单-->
        <Border CornerRadius="10 0 0 10" >
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="#223266" Offset="0"/>
                    <GradientStop Color="#27396b" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>

            
            
            
        </Border>

        <!--右侧-->
        <Border CornerRadius="0 10 10 0" Grid.Column="1">
            <Border.Background>
                <LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
                    <GradientStop Color="#41518f" Offset="0"/>
                    <GradientStop Color="#2c386c" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>




        </Border>
    </Grid>
</Window>

image.png


2 设置窗体右侧单击可以移动

        <!--右侧-->
        <Border CornerRadius="0 10 10 0" Grid.Column="1" MouseDown="Border_MouseDown">
       private void Border_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (e.ChangedButton == MouseButton.Left)
            {
                this.DragMove();
            }
        }


3 左侧菜单区域添加 LOGO

  <Border CornerRadius="10" Width="40" Height="40" >
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,2">
                                <GradientStop Color="#7f7cf1" Offset="0"/>
                                <GradientStop Color="#d3b7ff" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <TextBlock Text="AY" FontFamily="SemiBold" Foreground="White" FontSize="22" TextAlignment="Center" VerticalAlignment="Center" />
                    </Border>

image.png


4 用户名显示

  <StackPanel >
                <!--用户名-->
                <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Margin="0 35 0 0" >
                    <Border CornerRadius="10" Width="40" Height="40" >
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,2">
                                <GradientStop Color="#7f7cf1" Offset="0"/>
                                <GradientStop Color="#d3b7ff" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <TextBlock Text="AY" FontFamily="SemiBold" Foreground="White" FontSize="22" TextAlignment="Center" VerticalAlignment="Center" />
                    </Border>

                    <StackPanel Margin="10 0 0 0" Orientation="Vertical" VerticalAlignment="Center">
                        <TextBlock Text="Aaron Yang" FontSize="15" Margin="0 0 0 5" Foreground="#c2cfff"/>
                        <TextBlock Text="测试版 1.2" FontSize="15" Foreground="#7788bf"/>
                    </StackPanel>
                </StackPanel>

        
            </StackPanel>

image.png


5 分隔线

           <Separator Height="1" Margin="20 30" Background="#46558a"/>

image.png


6 添加按钮菜单组

nuget安装 FontAwesome.Sharp    提供图标

image.png

输入fa:IconImage    Shift+Alt+F10   然后自动提示,回车引用空间

image.png

 <Button>
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="Home"/>
                        <TextBlock Text="主页"/>
                    </StackPanel>                    
                </Button>

image.png


7 在App.xaml自定义button外观

右键按钮

image.png

选择 应用程序

image.png

生成了代码

image.png

修改代码如下:

  <Style x:Key="menuButton" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#707db2"/>
            <Setter Property="Margin" Value="0 0 0 5"/>
            <Setter Property="Tag" Value="#6673b7"/>
            <Setter Property="Height" Value="45"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="4 0 0 0" >
                            <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Foreground" Value="#bccaf1"/>
                    <Setter Property="Tag" Value="#7071f0"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                <GradientStop Color="#31407b" Offset="0"/>
                                <GradientStop Color="#495385" Offset="3"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Border  Background="{TemplateBinding Background}" BorderThickness="4 0 0 0" BorderBrush="#a5a1f5">
                                    <ContentPresenter  HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

image.png

Tag存放的是 图标的颜色


8 设置按钮内的 图标和文本外观

        <Style x:Key="menuButtonIcon" TargetType="fa:IconImage">
            <Setter Property="Width" Value="23"></Setter>
            <Setter Property="Height" Value="23"/>
            <Setter Property="Margin" Value="35 0 20 0"/>
            <Setter Property="Foreground" Value="{Binding Path=Tag,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Button}}}"/>
        </Style>
        <Style x:Key="menuButtonText" TargetType="TextBlock">
            <Setter Property="FontSize" Value="13"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Foreground" Value="{Binding Path=Tag,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Button}}}"/>
        </Style>

xaml使用

     <Button Style="{StaticResource menuButton}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="Home" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="主页" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>                    
                </Button>

效果

image.png

鼠标移入

image.png


9 拷贝button样式,改名写个激活状态的外观

(正常情况,菜单一般为 itemscontrol 后台绑定列表数据,datatemplate为radiobutton,或者直接listbox)

        <Style x:Key="menuButtonActive" TargetType="{x:Type Button}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                        <GradientStop Color="#31407b" Offset="0"/>
                        <GradientStop Color="#495385" Offset="3"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Foreground" Value="#bccaf1"/>
            <Setter Property="Margin" Value="0 0 0 5"/>
            <Setter Property="Tag" Value="#7071f0"/>
            <Setter Property="Height" Value="45"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="#a5a1f5" BorderThickness="4 0 0 0" >
                            <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
          
        </Style>

xaml拷贝button,修改组成菜单

 <Button Style="{StaticResource menuButtonActive}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="Home" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="工作台" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>                    
                </Button>

                <Button Style="{StaticResource menuButton}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="FileSignature" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="清单" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>
                </Button>

                <Button Style="{StaticResource menuButton}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="EnvelopeOpenText" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="消息" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>
                </Button>

                <Button Style="{StaticResource menuButton}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="ShoppingCart" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="订单" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>
                </Button>

                <Button Style="{StaticResource menuButton}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="ChartArea" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="统计" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>
                </Button>

                <Button Style="{StaticResource menuButton}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="Coins" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="收入" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>
                </Button>

                <Button Style="{StaticResource menuButton}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="FlagCheckered" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="促销" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>
                </Button>

                <Button Style="{StaticResource menuButton}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="Cog" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="设置" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>
                </Button>

                <Button Style="{StaticResource menuButton}">
                    <StackPanel Orientation="Horizontal">
                        <fa:IconImage Icon="PowerOff" Style="{StaticResource menuButtonIcon}"/>
                        <TextBlock Text="注销" Style="{StaticResource menuButtonText}"/>
                    </StackPanel>
                </Button>

效果如下:

image.png


10 右侧区域我们分3行,添加顶部菜单按钮

    <!--右侧-->
        <Border CornerRadius="0 10 10 0" Grid.Column="1" MouseDown="Border_MouseDown">
            <Border.Background>
                <LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
                    <GradientStop Color="#41518f" Offset="0"/>
                    <GradientStop Color="#2c386c" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="200"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>


            </Grid>
        </Border>

第一行自动高,第二行200,第三行剩余所有高度


第一行添加一些信息,添加个topMenuButton按钮样式

        <Style x:Key="topMenuButton" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="#9eabe2"/>
            <Setter Property="Margin" Value="5 0 0 0"/>
            <Setter Property="Width" Value="80"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" Background="{TemplateBinding Background}" CornerRadius="15" >
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Foreground" Value="#FFFFFF"/>
                    <Setter Property="Background" Value="#5b60c4"/>
                </Trigger>
            </Style.Triggers>
        </Style>
 <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="200"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <!--顶部菜单-->
                <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0 0 30 20">
                    <Button Style="{StaticResource topMenuButton}" Content="今日"/>
                    <Button Style="{StaticResource topMenuButton}" Content="本周" Background="#5b60c4" Foreground="#FFFFFF"/>
                    <Button Style="{StaticResource topMenuButton}" Content="本月"/>
                    <Button Style="{StaticResource topMenuButton}" Content="本年"/>
                </StackPanel>
                
                <!--标题-->
                <TextBlock Text="下午好, AaronYang" FontSize="26" Foreground="#ccd7ff" HorizontalAlignment="Left" Margin="50 35 0 20"/>
            </Grid>


image.png











引用库:

awesome-inc/FontAwesome.Sharp: A library for using Font Awesome in WPF & Windows Forms applications (github.com)

 FontAwesome.Sharp    提供图标 

<TextBlock fa:Awesome.Pattern="{}{fa:(\w+)}"
    fa:Awesome.Inline="{}{fa:Bitcoin} is a cryptocurrency. {fa:EuroSign} is a fiat money."
    />



推荐您阅读更多有关于“wpf in net6,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf,目前主maui

招聘合肥一枚WPF工程师,跟我一个开发组,10-15K,欢迎打扰

目前在合肥市企迈科技就职

AYUI8全源码 Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

标签列表