WPF Material Design UI框架：部分常用控件简单使用

Material Design in xaml 是开源免费的ui框架，工控软件主打的就是简单界面。以下简称MD。

罪恶の王冠

4857人浏览 · 2023-10-23 14:33:45

罪恶の王冠 · 2023-10-23 14:33:45 发布

文章目录

前言
相关资源
MD 框架使用

前言

Material Design in xaml 是开源免费的ui框架，工控软件主打的就是简单界面。
以下简称MD

MD 框架使用

启动环境配置

安装Nuget包

在这里插入图片描述

App.xaml 配置

<Application x:Class="WpfApp1.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <!--添加MD 资源包-->
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme BaseTheme="Light"
                        PrimaryColor="DeepPurple" SecondaryColor="Lime" />
                <ResourceDictionary
                        Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

测试导入是否成功

MainWindow.xmal

<Window x:Class="WpfApp1.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:WpfApp1"
        xmlns:MD="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:Views="clr-namespace:WpfApp1.Views" mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="my_text" TargetType="TextBlock">
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Margin" Value="8" />
        </Style>
    </Window.Resources>
    <Window.DataContext>
        <!--需要命名来指定数据源-->
        <local:MainWindowViewModel x:Name="viewModel" />
    </Window.DataContext>
    <Grid>
        <!--不能直接写TitleValue，Binding数据源会有问题-->
        <MD:Card>
            <TabControl  MD:ColorZoneAssist.Mode="PrimaryLight"
                    >
                <TabItem Header="Tab 1">
                    
                </TabItem>
                <TabItem Header="Tab 2">

                </TabItem>
                <TabItem Header="Tab 3">

                </TabItem>
            </TabControl>
        </MD:Card>
    </Grid>
</Window>

在这里插入图片描述

MD 组件使用测试

Button

Card

<WrapPanel Margin="10">
    <Button Width="90" Content="Button" Margin="5"/>
    <Button Margin="5" >
        
        <MD:PackIcon Kind="Alarm" Width="30" Height="25"/>
    </Button>
</WrapPanel>

在这里插入图片描述
我后面想稍微改一下按钮，比如改个圆角，发现很麻烦，可能需要覆写控件模板。想想还是算了，先用官方的解决方案。先学套路，解决问题，再了解底层，扩展方法。

ComboBoxes：单项框

<ComboBox MD:HintAssist.Hint="性别" Margin="5" Cursor="">
    <ComboBoxItem Content="男" />
    <ComboBoxItem Content="女" />
    <ComboBoxItem Content="保密" />
</ComboBox>

在这里插入图片描述

数据绑定版

<ComboBox MD:HintAssist.Hint="学历" Margin="5" Cursor="" Width="256"
        ItemsSource="{Binding StrLists}"
        Style="{StaticResource MaterialDesignOutlinedComboBox}">
</ComboBox>

数据：

StrLists = new List<string>()
{
    "小学","初中","高中","大学"
};

在这里插入图片描述

Data Grids：表格

这里只用最简单最简单的自动生成

<DataGrid CanUserAddRows="False" ItemsSource="{Binding Templates}"
        SelectionMode="Extended" SelectionUnit="Cell" />

数据源

//类定义
public class TemplateDate
{
    public string Name { get; set; }

    public int Age { get; set; }

    public long Phone { get; set; }

    public enum SexEnum { 男,女,保密}

    public SexEnum Sex  { get; set; }
}

//数据源定义

Templates = new List<TemplateDate>() {
    new TemplateDate(){Name="小明",Age = 16,Phone = 13214324920,Sex = TemplateDate.SexEnum.男},
    new TemplateDate(){Name="小红",Age = 17,Phone = 38188949204,Sex = TemplateDate.SexEnum.女}
};

在这里插入图片描述

Dialogs:弹窗

简单弹窗功能

<MD:DialogHost >
    <Button
            Command="{x:Static MD:DialogHost.OpenDialogCommand}">
        <Button.CommandParameter>
            <StackPanel Margin="16">
                <ProgressBar
                        Style="{DynamicResource MaterialDesignCircularProgressBar}"
                        HorizontalAlignment="Center" Margin="16"
                        IsIndeterminate="True" Value="0" />
                <Button IsCancel="True" Margin="8 0 0 0"
                        Command="{x:Static MD:DialogHost.CloseDialogCommand}"
                        Content="Save" />
            </StackPanel>
        </Button.CommandParameter>
        Edit
    </Button>
</MD:DialogHost>

在这里插入图片描述

简单讲解

Dialogs一般有三种弹窗：

Notice:通知，过会消失
Confrim:确定弹窗，点击确定或者取消
Input，弹窗输入

一般有4种状态：Debug,Info,Warning,Error
这不不做展开，以后有机会研究一下。

还有两点需要注意：

DialogHost ：需要将弹窗内容放在DialogHost里面
DialogHost给了通用的按钮事件，OpenDialogCommand打开弹窗，CloseDialogCommand关闭弹窗。如果需要对这两个事件进行控制需要自己重写一个方法

Drawer：侧边栏

代码比较复杂

<DockPanel>

    <materialDesign:DrawerHost x:Name="DrawerHost" Width="480" Height="480"
            Margin="32" HorizontalAlignment="Center"
            VerticalAlignment="Center"
            BorderBrush="{DynamicResource MaterialDesignDivider}"
            BorderThickness="2"
            BottomDrawerCornerRadius="20 20 0 0">
            <!--侧边栏区-->
        <materialDesign:DrawerHost.LeftDrawerContent>
            <TextBlock Text="左侧" FontSize="50" />

        </materialDesign:DrawerHost.LeftDrawerContent>
        <materialDesign:DrawerHost.TopDrawerContent>
            <TextBlock Text="上侧" FontSize="50"/>
        </materialDesign:DrawerHost.TopDrawerContent>
        <materialDesign:DrawerHost.RightDrawerContent>
            <TextBlock Text="右侧" FontSize="50"/>

        </materialDesign:DrawerHost.RightDrawerContent>
        <materialDesign:DrawerHost.BottomDrawerContent>
            <TextBlock Text="下侧" FontSize="50"/>
        
        </materialDesign:DrawerHost.BottomDrawerContent>
        <!--按钮事件区-->
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button Grid.Row="1" Grid.Column="0" Margin="4"
                    Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                    CommandParameter="{x:Static Dock.Left}"
                    Content="{materialDesign:PackIcon Kind=ArrowLeft}" />
            <Button Grid.Row="0" Grid.Column="1" Margin="4"
                    Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                    CommandParameter="{x:Static Dock.Top}"
                    Content="{materialDesign:PackIcon Kind=ArrowUp}" />
            <Button Grid.Row="1" Grid.Column="2" Margin="4"
                    Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                    CommandParameter="{x:Static Dock.Right}"
                    Content="{materialDesign:PackIcon Kind=ArrowRight}" />
            <Button Grid.Row="2" Grid.Column="1" Margin="4"
                    Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                    CommandParameter="{x:Static Dock.Bottom}"
                    Content="{materialDesign:PackIcon Kind=ArrowDown}" />
            <Button Grid.Row="1" Grid.Column="1" Margin="4"
                    Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                    Content="{materialDesign:PackIcon Kind=ArrowAll}"
                    Style="{StaticResource MaterialDesignRaisedSecondaryButton}" />
        </Grid>
    </materialDesign:DrawerHost>
</DockPanel>

在这里插入图片描述

Tabs

<MD:Card>
    <TabControl MD:ColorZoneAssist.Mode="PrimaryLight">
        <TabItem Header="Tab 1" Cursor="">
            <Grid Margin="10">
                
            </Grid>
        </TabItem>
        <TabItem Header="Tab 2">
            <Grid Margin="10">
            </Grid>


        </TabItem>
        <TabItem Header="Tab 3">

        </TabItem>
    </TabControl>
</MD:Card>

在这里插入图片描述

Pickers:时间选择器

<DatePicker Margin="10" Width="100" MD:HintAssist.Hint="Pick Date"
        MD:TextFieldAssist.HasClearButton="True"
        Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />

在这里插入图片描述

Progress Indicators:进度条

<ProgressBar Width="100" IsIndeterminate="True" />

在这里插入图片描述

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

“源”聚天大，码动未来|开放原子校源行（天津大学站）即将启幕！

11月22日，开放原子校源行（天津大学站）将在天津大学北洋园校区隆重举办。

开放原子开发者工作坊

openEuler系累计装机量突破1000万，树立操作系统产业新里程碑

11月15日，以“以智能，致世界”为主题的操作系统大会2024在北京中关村国际创新中心召开。

开放原子开发者工作坊

多模态大模型&科学计算双管齐下，百度飞桨两大赛项报名倒计时！

第二届开放原子大赛是由开放原子开源基金会组织举办的开源技术领域专业赛事，聚焦解决真问题，重点覆盖基础软件、工业软件、人工智能大模型等领域

开放原子开发者工作坊

所有评论(0)

查看更多评论

罪恶の王冠

@qq_44695769

已为社区贡献8条内容

WPF Material Design UI框架：部分常用控件简单使用

罪恶の王冠

文章目录

前言

相关资源

MD 框架使用

启动环境配置

安装Nuget包

测试导入是否成功

MD 组件使用测试

Button

Card

ComboBoxes：单项框

数据绑定版

Data Grids：表格

Dialogs:弹窗

简单讲解

Drawer：侧边栏

Tabs

Pickers:时间选择器

Progress Indicators:进度条

所有评论(0)

罪恶の王冠