当前位置:网站首页 / WPF / 正文

2020 WPF 取经之路第8天 - MahApps 迁移整理

时间:2020年04月15日 | 作者 : aaronyang | 分类 : WPF | 浏览: 301次 | 评论 0


ayx这个库搞定了,是开源无条件使用的,并且通过博客方式讲解使用,由于AYUI8庞大,适合离散的项目开发,不适合小项目,但是如果是终端触屏,还是推荐使用那个库。pc鼠标操作的暂时不推荐你们研究了。

新建空白wpf的项目,先了解它自带的怎么用,有哪些特色才考虑迁移。

因为迁移了部分,我还是跑不起来,所以先看看他原生怎么用。

(遇到新东西,不要怕)

新建wpf 4.0空白项目,nuget安装,兼容4.0的是controlzex是3.0.2.4的,mahapps是1.6.5.1

image.png

在App.xaml添加样式,

<Application x:Class="AyMahAppsStudy.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:AyMahAppsStudy"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <!-- Accent and AppTheme setting -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>


最新的MahApps是

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>

主窗体修改下

<Controls:MetroWindow x:Class="AyMahAppsStudy.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" Title="MainWindow" Height="600" Width="800">

</Controls:MetroWindow>
    public partial class MainWindow : MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

image.png

简单通用属性测试

组1 完全diy窗体绘制

ShowMinButton="False" 

ShowMaxRestoreButton="False"  

ShowCloseButton="False" 

TitlebarHeight="0"

做一个有阴影无自带按钮和顶部条的窗体

 后台metrowindow,没有提供快速还原和最大的等便捷方法,需要自己处理


组2   dialog窗体

ShowMinButton="False" 

ShowMaxRestoreButton="False"  

ShowCloseButton="True" 

TitlebarHeight="0"

ResizeMode="NoResize" 

不可调整大小可以关闭的窗体,但是单击任务栏不可以快速最小化和还原



组3 不想要阴影的diy窗体

直接使用UseNoneWindowStyle="True"

没有阴影无任何东西的窗体


组4 (QQ管家,就是不可以最大化的)

UseNoneWindowStyle="True" ResizeBorderThickness="0"

没有阴影,也不可以调整大小的窗体,但是单击任务栏可以快速最小化和还原


测试了下,运行时是否可以切换UseNoneWindowStyle,因为wpf是不可以allowtransparent=true后,运行时换false

image.png

稍微有点bug,但是问题不大,就是再次切换,顶部的titlebar会消失,但是右侧按钮会存在。


组5  使用自带的右侧按钮,但是内容区域会伸展到titlebar

测试 ,设置TitlebarHeight="50"  右侧按钮不会拉伸全部的,是固定宽高的

image.png

测试Title属性,有时候他和Icon都要设置,因为影响任务栏,任务管理器中的图标和文字的,但是界面不想显示,当然可以设置个内容向上偏移遮住他们就行了

image.png

虽然没有提供TitleVisibility,我们可以通过修改模板

<Controls:MetroWindow x:Class="AyMahAppsStudy.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" Title="AY测试" Height="600" Width="800"  TitleForeground="Red">
    <Controls:MetroWindow.TitleTemplate>
        <DataTemplate>
            <Grid></Grid>
        </DataTemplate>
    </Controls:MetroWindow.TitleTemplate>
    <Grid Background="Transparent" Margin="0,-30,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock Text="自定义标题,不影响任务栏显示" Margin="5,0,0,0" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center"/>

     
    </Grid>
</Controls:MetroWindow>

image.png

image.png

添加自己的背景图案

<Controls:MetroWindow x:Class="AyMahAppsStudy.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" Title="AY测试" Height="600" Width="800"  TitleForeground="Red">
    <Controls:MetroWindow.TitleTemplate>
        <DataTemplate>
            <Grid></Grid>
        </DataTemplate>
    </Controls:MetroWindow.TitleTemplate>
    <Grid Background="Transparent" Margin="0,-30,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid>
            <Grid.Background>
                <LinearGradientBrush>
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Color="Red" Offset="0.2"></GradientStop>
                        <GradientStop Color="Green" Offset="0.7"></GradientStop>
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Grid.Background>
            <TextBlock Text="自定义标题,不影响任务栏显示" Margin="5,0,0,0" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" />
        </Grid>
    

     
    </Grid>
</Controls:MetroWindow>

image.png

组6 窗体右侧增加额外的按钮

   <Controls:MetroWindow.RightWindowCommands>
        <Controls:WindowCommands ShowLastSeparator="False">
            <Button Content="settings" />
            <Button>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    </Rectangle>
                    <TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="deploy cupcakes" />
                </StackPanel>
            </Button>
        </Controls:WindowCommands>
    </Controls:MetroWindow.RightWindowCommands>

image.png

关于WindowsCommands,显示分割符号

image.png

关于Icon和Title的设置一些属性不关心,因为窗体不可能全按照她这个来。

Non开头的,窗体失去活动时候的设置

image.png

也提供了 自带右侧按钮是否可用

image.png

同样,还有LeftWindowCommands左侧的按钮,设计的也很好



接下来就是发光

GlowBrush


组8 遮盖任务栏的最大化

IgnoreTaskbarOnMaximize=true

 据我了解,github开源的shell那个windowchrome没有解决这个问题

经过测试,可以运行时候随时切换


组9 遮罩层,也就是在当前window内部的一些usercontrol

image.png

暂时不测试

它的fayout特别适合做 触屏的,但是也可以配合splitview去解决


阻不阻塞代码不知道,用window写弹窗的是阻塞的,代码可以暂停的效果



组10 有时候右侧的按钮想DIY,如果按钮不隐藏,可以通过设置样式的方式,绕过后台click调父类的方法的方式去做了,我ayui的方式是后台调用父窗体的 Do开头的方法

image.png



还有这个 WindowTransitionsEnabled属性,暂时不知道效果

在core3版本,还增加了

KeepBorderOnMaximize属性,最大化是否显示border

还有TryToBeFlickerFree属性,防止从左侧调整大小,窗体闪烁的问题

(曾经的窗体,单击任务栏最小化,可能窗体画面会闪烁,而且会导致意外的bug,我曾经遇到过,我把dialog默认最大化透明,只保留中间 弹窗的区域,然后窗体的内部元素是支持动画的,所以间接完成动画效果,结果单击任务栏,最小化和还原的操作,会导致最大化的窗体背景被缩小了,当然也遇到过竖条的闪屏问题)



目前来说这个库很好,主题设计 明暗 两个大类,每个大类使用accent 主色调,然后计算个颜色,次配色。

思路很符合现在的UI设计

不要考虑diy通过xml或者json配置颜色,如果你想配置,可以学习controlzex最新的代码,他的默认客户端demo是通过json配置来的,至于可不可视化xaml视图我没测试。


到目前为止的我迁移的库,还是很有问题,还没弄好,人家是core3.0写的,迁移到4.0,有些地方还是很那个的


他的窗体和我的aywindow,技术能力更好点,接口比我的少了点,但是等迁移过来,也可以添加的。

很多设计类似,他的flyout和我的aylayer,差不多,但是我的aywindow有问题,我必须要迁移。


下篇文章再记录


他的主题是怎么实现 和 迁移,或者怎么个对接法

还要看看他的对话框设计,以及怎么对接

一切基础完成了,就可以 添加迁移其他的 控件了。



下个版本的ayui,定义明暗主题,背景图可选,控件随意使用,不需要用我插件创建项目,mvc可选







































推荐您阅读更多有关于“WPF4.5,”的文章

猜你喜欢

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

发表评论

必填

选填

选填

必填

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

  查看权限

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

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

查看捐赠

AYUI7.X MVC教程 更新如下:

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

兼容XP到win10,vs2015/2017/2019,最新AYUI:7.6.5.5

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表