WPF UI框架界面开发教程（一）

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开源项目https://share.weiyun.com/py6W1dcK

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