WPF UI框架界面开发教程(一)

92 篇文章 10 订阅
92 篇文章 8 订阅

QQ:6726256

采用WPF MVVM框架 开发漂亮的主界面,以下是运行效果

在项目引用Fody开源控件自动改变属性

接下来封装ViewModel基类实现INotifyPropertyChanged

系统窗体标题不方便扩展也不美观,所以采用WindowChrome实现标题栏扩展功能

由于窗体,控件等需要设置颜色,创建颜色资源文件调用 

自定义重写主窗体样式 

最后绑定命令实现最大化,最小化,关闭功能,先定义命令基类

主要功能代码:

    <Window.Resources>
        <Style TargetType="{x:Type local:MainWindow}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Window}">
                        <!-- 设置边框线条距离窗部外部10 -->
                        <Border Margin="10">
                            <Grid>
                                <!-- 设置内部边框线条圆角10 -->
                                <Border x:Name="Container"
                                        Background="{StaticResource BackgroundLightBrush}"
                                        CornerRadius="10" />
                                <Border CornerRadius="10"
                                    Background="White">
                                    <!-- 设置线条带阴影 -->
                                    <Border.Effect>
                                        <DropShadowEffect ShadowDepth="0" Opacity="0.8" />
                                    </Border.Effect>
                                </Border>
                                <Grid>
                                    <Grid.OpacityMask>
                                        <VisualBrush Visual="{Binding ElementName=Container}" />
                                    </Grid.OpacityMask>
                                    <Grid.RowDefinitions>
                                        <!-- 标题高度 -->
                                        <RowDefinition Height="42" />
                                        <!-- 窗体高度 -->
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Grid Grid.Row="0" Panel.ZIndex="1">
                                        <Grid.ColumnDefinitions>
                                            <!-- 图标 -->
                                            <ColumnDefinition Width="Auto" />
                                            <!-- 内容 -->
                                            <ColumnDefinition Width="*" />
                                            <!-- 按钮 -->
                                            <ColumnDefinition Width="Auto" />

                                        </Grid.ColumnDefinitions>
                                        <!-- 图标按钮 -->
                                        <Button Style="{StaticResource SystemIconButton}">
                                            <Image Source="/Fashion.Word;Component/Images/Logo/logo-small.png" />
                                        </Button>

                                        <!-- Title -->
                                        <Viewbox Grid.Column="1" Grid.ColumnSpan="3" Margin="5">
                                            <StackPanel>
                                                <TextBlock  FontSize="14" Margin="0,0,0,-5">
                                                    <Run Text="W" Foreground="{StaticResource WordOrangeBrush}"/><Run Text="O" Foreground="{StaticResource WordBlueBrush}"/><Run Text="R" Foreground="{StaticResource WordRedBrush}"/><Run Text="D" Foreground="{StaticResource WordGreenBrush}"/>
                                                </TextBlock>
                                                <TextBlock Text="登录演示" Foreground="{StaticResource ForegroundDarkBrush}" TextAlignment="Center"/>
                                            </StackPanel>
                                        </Viewbox>

                                        <!-- Window Buttons -->
                                        <StackPanel Grid.Column="2" Orientation="Horizontal">
                                            <Button Command="{Binding MinimizeCommand}" Style="{StaticResource WindowControlButton}" Content="_" />
                                            <Button Command="{Binding MaximizeCommand}" Style="{StaticResource WindowControlButton}" Content="[ ]" />
                                            <Button Command="{Binding CloseCommand}" Style="{StaticResource WindowCloseButton}" Content="X" />
                                        </StackPanel>

                                    </Grid>
                                    <!-- Page Content -->
                                    <Border Grid.Row="1" Padding="0" ClipToBounds="True">
                                        <ContentPresenter Content="{TemplateBinding Content}" />
                                    </Border>

                                </Grid>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Window.DataContext>
        <vm:MainWindowVm Vmwindow="{x:Reference AppWindow}"></vm:MainWindowVm>
    </Window.DataContext>

    <WindowChrome.WindowChrome>
        <WindowChrome
            ResizeBorderThickness="{Binding ResizeBorderThickness}"
            CaptionHeight="{Binding TitleHeight}"
            CornerRadius="0"
            GlassFrameThickness="0"/>
    </WindowChrome.WindowChrome>
 [AddINotifyPropertyChangedInterface]
    public class BaseViewModel : INotifyPropertyChanged
    {
        /// <summary>
        /// The event that is fired when any child property changes its value
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged = (sender, e) => { };

        /// <summary>
        /// Call this to fire a <see cref="PropertyChanged"/> event
        /// </summary>
        /// <param name="name"></param>
        public void OnPropertyChanged(string name)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name)); 
        }
    }
public class DelegateCommand : ICommand
    {
        private Action<object> _action;
        private bool _canExecute;

        public DelegateCommand(Action<object> action) : this(action, true)
        {
        }

        public DelegateCommand(Action<object> action, bool canExecute)
        {
            this._action = action;
            this._canExecute = canExecute;
        }

        public event EventHandler CanExecuteChanged;

        public void OnCanExecuteChanged()
        {
            CanExecuteChanged?.Invoke(this, EventArgs.Empty);
        }

        public bool CanExecute(object parameter)
        {
            return this._canExecute;
        }

        public void Execute(object parameter)
        {
            this._action.Invoke(parameter);
        }
    }

 推荐一款WPF MVVM框架开源项目:Newbeecoder.UI

Newbeecoder.UI开源项目

Demo下载:

Newbeecoder.UI开源项目icon-default.png?t=M3K6https://share.weiyun.com/py6W1dcK

后续会创建登录功能,敬请期待。。。。。。。

微信扫码订阅
UP更新不错过~
关注
  • 1
    点赞
  • 14
    收藏
  • 打赏
    打赏
  • 0
    评论
ModernUI(http://mui.codeplex.com/)是一个开源的WPF界面库,利用该界面库,我们可以创建很酷的应用程序。下面是ModernUI官方示例,你可以从官方网站直接下载源码运行,如果是.NET 4.0的话,记得要声明“NET4”预编译变量,否则无法编译通过。 这个界面框架是基于ModernUI来实现的,在该文我将分享所有的源码,并详细描述如何基于ModernUI来构造一个非常通用的、插件化的WPF开发框架。下载源码的同志,希望点击一下推荐。 本文将按照以下四点来介绍: (1)ModernUI简介; (2)构建通用界面框架的思路; (3)基于ModernUI和OSGi.NET的插件化界面框架实现原理及源码分析; (4)其它更有趣的东西~~。 要编写这样的WPF界面,我们需要在一个Window上声明菜单和Tab页面,下图是定义菜单的声明。 此外,每一个Tab风格页面,你也需要手动的为菜单创建这样的界面元素。 直接用这样的方式来使用ModernUI,显然不太适合团队协作性的并行开发,因为在一个团队的协作中,不同的人需要完成不同的功能,实现不同页面,每个人都需要来更改主界面。 我非常希望模块化的开发方法,因为这可以尽可能的复用现有资产,使程序员可以聚焦在自己关注的业务逻辑上,不需要关心UI的使用。下面,我将来描述基于ModernUI实现的一个通用界面框架,这个界面框架允许程序员在自己的业务模块中配置需要显示的界面元素。 通用界面框架实现思路: 我希望能够实现这样的通用界面框架: (1)程序员可以直接实现需要展现业务逻辑的界面,不需要关注如何使用ModernUI; (2)程序员可以通过简单的配置就可以将自己实现的业务逻辑页面显示在主界面中; (3)这个界面框架可以完全复用。 当我看到ModernUI这个界面库时,我希望将应用程序做成模块化,每一个模块能够: (1)通过以下配置能够直接显示二级菜单。 (2)通过以下配置能够直接显示三级菜单。 这样做的好处是,开发插件的时候可以不需要关心界面框架插件;团队在协作开发应用的时候,可以独立开发并不需要修改主界面;团队成员的插件可以随时集成到这个主界面;当主界面无法满足我们的布局时或者用户需求无法满足时,可以直接替换主界面框架而不需要修改任何插件代码。 最终的效果如下,以下界面的几个菜单及点击菜单显示的内容由DemoPlugin插件、DemoPlugin2插件来提供。当插件框架加载更多插件时,界面上会出现更多的菜单;反之,当插件被卸载或者被停止时,则相应的菜单将消失掉。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

有技巧搬砖

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值