【6月日新计划14】WPF入门-搭配Material Design,項目實戰

1.Install Material Design

图片.png

1.Configuring your App.xaml

在App.xaml中加入資源字典(materialDesign),才能使用。

<Application x:Class="Example.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>
            <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>

2.Source Code

首先下載源碼，當然也可以直接在github上面

github.com/MaterialDes…

解壓後，用visual studio 打開MainDemo.Wpf

图片.png

3.Demo

在Release中下載DemoApp.zip

图片.png

解壓後，雙擊啟動程序

图片.png

2. Index Page

設置默認首頁

1.創建接口

namespace BlankApp1.Common
{
    public interface IConfigureService
    {
        void Configure();
    }
}

2.MainWindow.xaml

<Window x:Class="BlankApp1.Views.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:exe="clr-namespace:BlankApp1.Extensions"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:local="clr-namespace:BlankApp1"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:prism="http://prismlibrary.com/"
        Width="1080"
        Height="850"
        prism:ViewModelLocator.AutoWireViewModel="True"
        AllowsTransparency="True"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{materialDesign:MaterialDesignFont}"
        Style="{StaticResource MaterialDesignWindow}"
        TextElement.FontSize="14"
        TextElement.FontWeight="Medium"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        WindowStartupLocation="CenterScreen"
        WindowStyle="None"
        mc:Ignorable="d">
    <materialDesign:DialogHost x:Name="DialogHost"
                               DialogTheme="Inherit"
                               Identifier="RootDialog">

        <materialDesign:DrawerHost x:Name="DrawerHost"
                                   IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
            <materialDesign:DrawerHost.LeftDrawerContent>
                <DockPanel MinWidth="220">
                    <StackPanel DockPanel.Dock="Top">
                        <Image Width="100"
                               Height="100"
                               Margin="0,30,0,0"
                               Source="/Image/Cat.jpg">
                            <Image.Clip>
                                <EllipseGeometry Center="50,50"
                                                 RadiusX="50"
                                                 RadiusY="50" />
                            </Image.Clip>
                        </Image>
                        <TextBox Margin="10"
                                 HorizontalAlignment="Center"
                                 FontSize="25"
                                 Text="Nolan" />
                    </StackPanel>

                    <TextBox x:Name="DemoItemsSearchBox"
                             Width="200"
                             Margin="16,4"
                             materialDesign:HintAssist.Hint="Search"
                             materialDesign:TextFieldAssist.DecorationVisibility="Collapsed"
                             materialDesign:TextFieldAssist.HasClearButton="True"
                             DockPanel.Dock="Top"
                             Style="{StaticResource MaterialDesignOutlinedTextBox}" />

                    <ListBox x:Name="MenuBar"
                             Margin="0,16,0,16"
                             AutomationProperties.Name="DemoPagesListBox"
                             ItemsSource="{Binding MenuBars}"
                             Style="{StaticResource MaterialDesignNavigationPrimaryListBox}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="SelectionChanged">
                                <i:InvokeCommandAction Command="{Binding NavigateCommand}"
                                                       CommandParameter="{Binding ElementName=MenuBar, Path=SelectedItem}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <ListBox.Resources>
                            <Style BasedOn="{StaticResource MaterialDesignScrollBarMinimal}"
                                   TargetType="ScrollBar" />
                        </ListBox.Resources>
                        <ListBox.ItemTemplate>
                            <DataTemplate DataType="domain:DemoItem">
                                <StackPanel Orientation="Horizontal">
                                    <materialDesign:PackIcon Width="20"
                                                             Height="20"
                                                             Margin="10,4,0,4"
                                                             Kind="{Binding Icon}" />
                                    <TextBlock Margin="10,5,0,4"
                                               AutomationProperties.AutomationId="DemoItemPage"
                                               FontSize="15"
                                               Text="{Binding Title}" />
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </DockPanel>
            </materialDesign:DrawerHost.LeftDrawerContent>

            <DockPanel>
                <materialDesign:ColorZone x:Name="ColorZone"
                                          Padding="16"
                                          materialDesign:ElevationAssist.Elevation="Dp4"
                                          DockPanel.Dock="Top"
                                          Mode="PrimaryMid">
                    <DockPanel LastChildFill="True">
                        <StackPanel DockPanel.Dock="Right"
                                    Orientation="Horizontal">
                            <Button Width="50"
                                    Height="50"
                                    Margin="5"
                                    Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                    Style="{StaticResource MaterialDesignToolButton}"
                                    ToolTip="Account">
                                <Image Width="40"
                                       Height="40"
                                       Source="/Image/Cat.jpg">
                                    <Image.Clip>
                                        <EllipseGeometry Center="20,20"
                                                         RadiusX="20"
                                                         RadiusY="20" />
                                    </Image.Clip>
                                </Image>
                            </Button>

                            <Button x:Name="btnSet"
                                    Margin="14"
                                    Content="{materialDesign:PackIcon Kind=Cog,
                                                                  Size=24}"
                                    Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                    Style="{StaticResource MaterialDesignToolButton}"
                                    ToolTip="Setting" />

                            <Button x:Name="btnMin"
                                    Content="{materialDesign:PackIcon Kind=WindowMinimize,
                                                                  Size=24}"
                                    Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                    Style="{StaticResource MaterialDesignToolButton}"
                                    ToolTip="Min" />

                            <Button x:Name="btnMax"
                                    Content="{materialDesign:PackIcon Kind=WindowMaximize,
                                                                  Size=24}"
                                    Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                    Style="{StaticResource MaterialDesignToolButton}"
                                    ToolTip="Max" />

                            <Button x:Name="btnPower"
                                    Content="{materialDesign:PackIcon Kind=Power,
                                                                  Size=26}"
                                    Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                    Style="{StaticResource MaterialDesignToolButton}"
                                    ToolTip="Power" />

                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <ToggleButton x:Name="MenuToggleButton"
                                          AutomationProperties.Name="HamburgerToggleButton"
                                          IsChecked="False"
                                          Style="{StaticResource MaterialDesignHamburgerToggleButton}" />

                            <Button Margin="24,0,0,0"
                                    materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                                    Command="{Binding BackCommand}"
                                    Content="{materialDesign:PackIcon Kind=ArrowLeftCircleOutline,
                                                                  Size=26}"
                                    Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                    Style="{StaticResource MaterialDesignToolButton}"
                                    ToolTip="Back" />

                            <Button Margin="16,0,0,0"
                                    materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                                    Command="{Binding ForwardCommand}"
                                    Content="{materialDesign:PackIcon Kind=ArrowRightCircleOutline,
                                                                  Size=26}"
                                    Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                    Style="{StaticResource MaterialDesignToolButton}"
                                    ToolTip="Forward" />

                            <TextBlock Margin="16"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       AutomationProperties.Name="Material Design In XAML Toolkit"
                                       FontSize="20"
                                       Text="Material Design Project" />
                        </StackPanel>
                    </DockPanel>
                </materialDesign:ColorZone>
                <StackPanel>
                    <ContentControl prism:RegionManager.RegionName="{x:Static exe:PrismManager.MainWindowRegionName}" />
                </StackPanel>
            </DockPanel>
        </materialDesign:DrawerHost>
    </materialDesign:DialogHost>
</Window>

3.MainWindow.xaml.cs

using BlankApp1.Common;
using BlankApp1.Common.Models;
using BlankApp1.Extensions;
using Prism.Commands;
using Prism.Mvvm;
using Prism.Regions;
using Prism.Services.Dialogs;
using System;
using System.Collections.ObjectModel;
using System.Windows.Controls.Primitives;

namespace BlankApp1.ViewModels
{
    public class MainWindowViewModel : BindableBase,IConfigureService
    {
        private readonly IRegionManager _regionManager;

        private IRegionNavigationJournal journal;
        private ObservableCollection<MenuBar> menuBars;

        public ObservableCollection<MenuBar> MenuBars
        {
            get { return menuBars; }
            set { menuBars = value; RaisePropertyChanged(); }
        }


        public DelegateCommand<MenuBar> NavigateCommand { get; set; }

        public DelegateCommand BackCommand { get; set; }

        public DelegateCommand ForwardCommand { get; set; }

        public MainWindowViewModel(IRegionManager regionManager)
        {
            _regionManager = regionManager;
            MenuBars = new ObservableCollection<MenuBar>();

            //CreateMenuBars();

            NavigateCommand = new DelegateCommand<MenuBar>(Navigate);

            BackCommand = new DelegateCommand(() =>
            {
                if (journal!= null && journal.CanGoBack) {
                    journal.GoBack();
                }
            });

            ForwardCommand = new DelegateCommand(() => 
            {
                if(journal != null && journal.CanGoForward) {
                    journal.GoForward();
                }
            });
        }

        private void Navigate(MenuBar menuBar)
        {
            if (menuBar == null || string.IsNullOrEmpty(menuBar.NameSpaces))
            {
                return;
            }

            _regionManager.Regions[PrismManager.MainWindowRegionName].RequestNavigate(menuBar.NameSpaces, back =>
            {
                journal = back.Context.NavigationService.Journal;
            });
        }

        void CreateMenuBars()
        {
            MenuBars.Add(new MenuBar() { Icon = "Home", Title = "Home", NameSpaces = "IndexView" });
            MenuBars.Add(new MenuBar() { Icon = "NotebookOutline", Title = "ToDoList", NameSpaces = "ToDoView" });
            MenuBars.Add(new MenuBar() { Icon = "NotebookEditOutline", Title = "OLK", NameSpaces = "OlkView" });
            MenuBars.Add(new MenuBar() { Icon = "WeatherFlash", Title = "Weather", NameSpaces = "WeatherView" });
            MenuBars.Add(new MenuBar() { Icon = "Cog", Title = "Config", NameSpaces = "ConfigView" });
        }
        public void Configure()
        {
            CreateMenuBars();
            _regionManager.Regions[PrismManager.MainWindowRegionName].RequestNavigate("IndexView");
        }
    }
}

4.app.xaml.cs

    protected override void OnInitialized()
    {
        var service = App.Current.MainWindow.DataContext as IConfigureService;
        if (service != null)
            service.Configure();
        base.OnInitialized();
    }

3.Project

3.1 Windows Config

MianWindow.xaml

    //不顯示窗口上面的內容
    WindowStyle="None"
    //每次啟動居中
    WindowStartupLocation="CenterScreen"
    //不顯示窗口上面的白邊
    AllowsTransparency="True"

背景圖片或者背景色

    <UserControl.Background>
        <ImageBrush
            ImageSource="/Image/Login02.jpg"
            Opacity="0.8"
            Stretch="Fill" />
    </UserControl.Background>

   //線性漸變
    <UserControl.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" SpreadMethod="Reflect">
            <GradientStop Color="AntiqueWhite"
                          Offset="0" />
            <GradientStop Color="Yellow"
                          Offset="1" />
        </LinearGradientBrush>
    </UserControl.Background>

3.2 Button Style

官方Demo，Style是風格，materialDesign：PackIcon kind是具體的圖標

<Button IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
    Style="{StaticResource MaterialDesignFloatingActionMiniLightButton}"
    ToolTip="MaterialDesignFloatingActionMiniLightButton">
  <materialDesign:PackIcon Width="{StaticResource IconSize}"
      Height="{StaticResource IconSize}"
      Kind="Alarm" />
</Button>

也可以把圖標寫進Content裡面

   <Button Margin="16,0,0,0" materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                      Command="{Binding HomeCommand}"
                      Content="{materialDesign:PackIcon Kind=AccessPoint,Size=24}"
                      Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                      Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
                      ToolTip="Home" />

1.Button Style

github.com/MaterialDes…

2.Button Kind

pictogrammers.com/library/mdi…

图片.png

3.3 圓角

1.圖片變成圓的

        <Image
            Width="100"
            Height="100"
            Margin="0,30,0,0"
            Source="/Image/Cat.jpg">
            <Image.Clip>
                <EllipseGeometry
                    Center="50,50"
                    RadiusX="50"
                    RadiusY="50" />
            </Image.Clip>
        </Image>

2.邊框圓角

Radius:半徑
ClipToBounds：超出當前View的部分截掉

    <Border
        Width="420"
        Height="300"
        MinHeight="256"
        BorderBrush="{DynamicResource PrimaryHueMidBrush}"
        BorderThickness="2"
        ClipToBounds="True"
        CornerRadius="10" />

    <Button
        Height="60"
        Margin="6"
        materialDesign:ButtonAssist.CornerRadius="16"
        materialDesign:ButtonProgressAssist.IsIndeterminate="True"
        materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
        materialDesign:ButtonProgressAssist.Value="-1"
        Command="{Binding ClickChangeImage}"
        Content="Indeterminate"
        Style="{StaticResource MaterialDesignRaisedButton}" />

3.4 如何佈局,靠邊

HorizontalAlignment="Right"

另一種就是DockPanel => DockPanel.Dock="Right"

如果還是沒效果，配置內容屬性HorizontalContentAlignment="Stretch"

        <ListBox
            x:Name="ToDoListBox"
            Grid.Row="1"
            Height="380"
            HorizontalContentAlignment="Stretch"
            ItemsSource="{Binding TodoListBox}"
            ScrollViewer.VerticalScrollBarVisibility="Hidden">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <DockPanel LastChildFill="False">
                        <StackPanel Grid.Column="0" Orientation="Horizontal">
                            <TextBlock
                                Margin="5"
                                FontSize="18"
                                Text="{Binding Title}" />
                            <TextBlock
                                Margin="5"
                                FontSize="18"
                                Text="{Binding Content}" />
                        </StackPanel>

                        <ToggleButton
                            Grid.Column="1"
                            Style="{StaticResource MaterialDesignSwitchToggleButton}"
                            ToolTip="Default ToggleButton Style" 
                            DockPanel.Dock="Right"/>
                    </DockPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

3.5 圖層

在標籤裡面添加這個屬性 Panel.ZIndex="1"

<TextBox x:Name="text" Panel.ZIndex="1" /> 
<Rectangle x:Name="rect" Panel.ZIndex="0"/>

 //内部按钮单击事件执行此操作
 Panel.SetZIndex(text, 0);
 Panel.SetZIndex(rect,1);

3.6 循環遍歷

3.6.1 ItemControl

水平佈局，如果不夠，則另起一行

        <ItemsControl ItemsSource="{Binding ToDoListBox}" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid
                        Width="175"
                        Height="120"
                        Margin="20">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50" />
                            <RowDefinition />
                        </Grid.RowDefinitions>

                        <Border
                            Grid.RowSpan="2"
                            Background="{Binding Color}"
                            CornerRadius="3" />

                        <TextBlock Margin="12"
                                   FontSize="20"
                                   FontWeight="Bold"
                                   Text="{Binding Title}" />

                        <materialDesign:PopupBox HorizontalAlignment="Right" Style="{StaticResource MaterialDesignToolPopupBox}" >
                            <StackPanel Width="85" Height="45">
                                <Button VerticalAlignment="Center" Content="Delete" />
                            </StackPanel>
                        </materialDesign:PopupBox>

                        <TextBlock
                            Grid.Row="1"
                            Margin="4"
                            FontSize="16"
                            Text="{Binding Content}" />

                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

明確知道有四個Dashboard，進行四等分。

        <ItemsControl ItemsSource="{Binding MyIndexBox}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="4" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border
                        Margin="5"
                        Background="{Binding Color}"
                        BorderBrush="Wheat"
                        BorderThickness="1"
                        CornerRadius="5">
                        <Border.Style>
                            <Style TargetType="Border">
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Effect">
                                            <Setter.Value>
                                                <DropShadowEffect
                                                    BlurRadius="10"
                                                    ShadowDepth="2"
                                                    Color="#DDDDDD" />
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                        <StackPanel
                            Width="185"
                            Height="auto"
                            Orientation="Vertical">
                            <materialDesign:PackIcon
                                Width="30"
                                Height="30"
                                Margin="4,8"
                                Kind="{Binding Icon}" />
                            <TextBlock
                                Margin="4"
                                FontSize="15"
                                Text="{Binding Description}" />
                            <TextBlock
                                Margin="4"
                                FontSize="18"
                                Text="{Binding Count}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

垂直排列，左側更能導航

        <ListBox
            x:Name="MenuBar"
            Margin="0,16,0,16"
            AutomationProperties.Name="DemoPagesListBox"
            ItemsSource="{Binding MenuBars}"
            Style="{StaticResource MaterialDesignNavigationPrimaryListBox}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <i:InvokeCommandAction Command="{Binding NavigateCommand}" CommandParameter="{Binding ElementName=MenuBar, Path=SelectedItem}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <ListBox.Resources>
                <Style BasedOn="{StaticResource MaterialDesignScrollBarMinimal}" TargetType="ScrollBar" />
            </ListBox.Resources>
            <ListBox.ItemTemplate>
                <DataTemplate DataType="domain:DemoItem">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon
                            Width="20"
                            Height="20"
                            Margin="10,4,0,4"
                            Kind="{Binding Icon}" />
                        <TextBlock
                            Margin="10,5,0,4"
                            AutomationProperties.AutomationId="DemoItemPage"
                            FontSize="15"
                            Text="{Binding Title}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

3.7 ScrollViewer

要想使用滾動條，必須先設定一個高度，當內容很多時，才可以滾動

   <ScrollViewer
        HorizontalAlignment="Center"
        VerticalScrollBarVisibility="Hidden">
        <ItemsControl HorizontalContentAlignment="Stretch" ItemsSource="{Binding ToDoListBox}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                       需要循環的內容
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>

3.8 文本框提示

    <TextBox
        x:Name="FruitTextBox"
        Width="150"
        HorizontalAlignment="Stretch"
        materialDesign:HintAssist.Hint="請輸入提示字" />

3.9 DrawerHost

materialDesign:DrawerHost.LeftDrawerContent 左側可隱藏彈窗,同理對應IsLeftDrawerOpen
materialDesign:DrawerHost.RightDrawerContent 右側可隱藏彈窗,同理對應IsRightDrawerOpen

    <materialDesign:DialogHost x:Name="DialogHost"
                               Identifier="Root">
        <materialDesign:DrawerHost x:Name="DrawerHost"
                               IsRightDrawerOpen="{Binding ElementName=SettingMenuToggleButton,Path=IsChecked}"
                               BottomDrawerCloseOnClickAway="True">
            <materialDesign:DrawerHost.RightDrawerContent>
                <DockPanel MinWidth="220">
                    <StackPanel DockPanel.Dock="Top">
                        <Image
                            Width="100"
                            Height="100"
                            Margin="0,30,0,0"
                            Source="/Image/Cat.jpg">
                            <Image.Clip>
                                <EllipseGeometry
                                    Center="50,50"
                                    RadiusX="50"
                                    RadiusY="50" />
                            </Image.Clip>
                        </Image>
                        <TextBox
                            Margin="10"
                            HorizontalAlignment="Center"
                            FontSize="25"
                            Text="Nolan" />
                    </StackPanel>
                </DockPanel>
            </materialDesign:DrawerHost.RightDrawerContent>
            <materialDesign:ColorZone Padding="16" Mode="PrimaryMid">
                <DockPanel>
                    <ToggleButton
                        x:Name="SettingMenuToggleButton"
                        VerticalAlignment="Center"
                        DockPanel.Dock="Right"
                        IsChecked="False"
                        Style="{StaticResource MaterialDesignSwitchSecondaryToggleButton}" />
                    <StackPanel materialDesign:RippleAssist.IsCentered="True" Orientation="Horizontal">
                        <ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" />
                    </StackPanel>
                </DockPanel>
            </materialDesign:ColorZone>
        </materialDesign:DrawerHost>
    </materialDesign:DialogHost>

materialDesign:DrawerHost.DialogContent 居中可隱藏彈窗

    <materialDesign:DialogHost CloseOnClickAway="True" DialogContentUniformCornerRadius="20">
        <materialDesign:DialogHost.DialogContent>
            <DockPanel
                Width="350"
                Height="250"
                VerticalAlignment="Center"
                LastChildFill="False">
                <TextBlock
                    Margin="15"
                    DockPanel.Dock="Top"
                    FontSize="20"
                    FontWeight="Bold"
                    Text="添加待辦事項" />
                <StackPanel
                    Margin="15"
                    DockPanel.Dock="Top"
                    Orientation="Horizontal">
                    <TextBlock FontSize="18" Text="Title : " />
                    <TextBox
                        x:Name="FruitTextBox"
                        Width="150"
                        HorizontalAlignment="Stretch"
                        materialDesign:HintAssist.Hint="請輸入提示字" />
                </StackPanel>
                <StackPanel
                    Margin="15"
                    DockPanel.Dock="Top"
                    Orientation="Horizontal">
                    <TextBlock FontSize="18" Text="Status : " />
                    <ComboBox>
                        <ComboBoxItem>待辦</ComboBoxItem>
                        <ComboBoxItem>已完成</ComboBoxItem>
                    </ComboBox>
                </StackPanel>

                <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
                    <Button
                        Margin="8"
                        Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"
                        Content="ACCEPT"
                        IsDefault="True"
                        Style="{StaticResource MaterialDesignFlatButton}">
                        <Button.CommandParameter>
                            <system:Boolean xmlns:system="clr-namespace:System;assembly=mscorlib">
                                True
                            </system:Boolean>
                        </Button.CommandParameter>
                    </Button>
                    <Button
                        Margin="8"
                        Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"
                        Content="CANCEL"
                        IsCancel="True"
                        Style="{StaticResource MaterialDesignFlatButton}">
                        <Button.CommandParameter>
                            <system:Boolean xmlns:system="clr-namespace:System;assembly=mscorlib">
                                False
                            </system:Boolean>
                        </Button.CommandParameter>
                    </Button>
                </StackPanel>
            </DockPanel>
        </materialDesign:DialogHost.DialogContent>
        <Grid>
            <Border ClipToBounds="True">
                <Grid>
                    <Button
                        Margin="2,0"
                        HorizontalAlignment="Right"
                        materialDesign:ButtonProgressAssist.IsIndeterminate="True"
                        materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
                        materialDesign:ButtonProgressAssist.Value="-1"
                        Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
                        Content="+添加待辦"
                        Style="{StaticResource MaterialDesignRaisedButton}" />
                </Grid>
            </Border>
        <Grid>
    </materialDesign:DialogHost>

3.10 划線

<Separator
    Name="MySeparator"
    Grid.Row="1"
    Width="Auto"
    Height="2"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Center"
    Background="Black" />

3.11 按鈕彈窗

和3.9有一點區別

<StackPanel VerticalAlignment="Center">
  <Button
    Width="128"
    Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
    Content="PASS VIEW">
    <Button.CommandParameter>
      <StackPanel
        Margin="16">
        <ProgressBar
          Margin="16"
          HorizontalAlignment="Center"
          IsIndeterminate="True"
          Style="{StaticResource MaterialDesignCircularProgressBar}"
          Value="0" />
        <Button
          HorizontalAlignment="Center"
          Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"
          CommandParameter="Sample2Cancel"
          Content="CANCEL"
          IsCancel="True"
          Style="{StaticResource MaterialDesignFlatButton}" />
      </StackPanel>
    </Button.CommandParameter>
  </Button>
</StackPanel>

3.12 設置默認首頁

使用region後，啟動總是什麼都不顯示，如何設置默認首頁

創建接口

namespace DeltaLotteryDrawSystem.Extension
{
    public interface IConfigService
    {
        void Configure();
    }
}

MianViewViewModel去繼承

    public class MainWindowViewModel : BindableBase,IConfigService
    {

        private readonly IRegionManager _regionManager;

        #region Parameter
        private string _title = "Prism Application";
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        public DelegateCommand<string> NavigateCommand { get; set; }

        #endregion

        public MainWindowViewModel(IRegionManager regionManager)
        {
            _regionManager = regionManager;

            NavigateCommand = new DelegateCommand<string>(Navigate);
            
        }


        private void Navigate(string viewName)
        {
            _regionManager.Regions[EventRegionManager.MainWindowRegionName].RequestNavigate(viewName);
        }

        void Configure()
        {
            _regionManager.Regions[EventRegionManager.MainWindowRegionName].RequestNavigate("LotteryDrawView");
        }
    }

App.xaml.cs

    public partial class App : PrismApplication
    {
        protected override Window CreateShell()
        {
            return Container.Resolve<MainWindow>();
        }

        protected override void OnInitialized()
        {
            var service = App.Current.MainWindow.DataContext as IConfigService;
            if (service != null)
            {
                service.Configure();
            }
            base.OnInitialized();
        }
    }

3.13 MainWindow

<Window x:Class="EventAggregatorApp.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:extension="clr-namespace:EventAggregatorApp.Extension"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:prism="http://prismlibrary.com/"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        Title="{Binding Title}"
        Width="950"
        Height="700"
        WindowStartupLocation="CenterScreen"
        prism:ViewModelLocator.AutoWireViewModel="True">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ListBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.RadioButton.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
                <!--  note you only need bring in these extra resource dictionaries when using non-default styles, so only bring them into your controls where the default style is not what you want  -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Slider.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.DataGrid.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        </ResourceDictionary>
    </Window.Resources>
    <materialDesign:DrawerHost x:Name="DrawerHost"
                               IsLeftDrawerOpen="{Binding ElementName=SettingMenuToggleButton,Path=IsChecked}"
                               BottomDrawerCloseOnClickAway="True">
        <materialDesign:DrawerHost.LeftDrawerContent>
            <DockPanel Width="220">
                <StackPanel DockPanel.Dock="Top">
                    <Image Width="80"
                           Height="80"
                           Margin="0,25,0,0"
                           Source="/Image/Cat.jpg">
                        <Image.Clip>
                            <EllipseGeometry Center="40,40"
                                             RadiusX="40"
                                             RadiusY="40" />
                        </Image.Clip>
                    </Image>
                    <TextBox Margin="10"
                             HorizontalAlignment="Center"
                             FontSize="15"
                             Text="User ID : Nolan" />
                </StackPanel>
                <ListBox x:Name="SettingMenuBar"
                         Grid.Column="0"
                         AutomationProperties.Name="DemoPagesListBox"
                         ItemsSource="{Binding LeftMenuBar}"
                         Style="{StaticResource MaterialDesignNavigationPrimaryListBox}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="SelectionChanged">
                            <i:InvokeCommandAction Command="{Binding NavigateCommand}"
                                                   CommandParameter="{Binding ElementName=SettingMenuBar, Path=SelectedItem}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <ListBox.Resources>
                        <Style BasedOn="{StaticResource MaterialDesignScrollBarMinimal}"
                               TargetType="ScrollBar" />
                    </ListBox.Resources>
                    <ListBox.ItemTemplate>
                        <DataTemplate DataType="domain:DemoItem">
                            <StackPanel Orientation="Horizontal">
                                <materialDesign:PackIcon Width="20"
                                                         Height="20"
                                                         Margin="40,4,0,4"
                                                         Kind="{Binding Icon}" />
                                <TextBlock Margin="10,5,0,4"
                                           AutomationProperties.AutomationId="DemoItemPage"
                                           FontSize="15"
                                           Text="{Binding Title}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </DockPanel>

        </materialDesign:DrawerHost.LeftDrawerContent>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <materialDesign:ColorZone Padding="3"
                                      Height="65"
                                      Mode="PrimaryMid">
                <DockPanel LastChildFill="False">
                    <StackPanel DockPanel.Dock="Right"
                                Orientation="Horizontal">
                        <Menu VerticalAlignment="Center">
                            <MenuItem Header="{materialDesign:PackIcon Kind=Cog,Size=24}"
                                      Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
                                <MenuItem Command="Cut"
                                          Header="_Cut"
                                          Foreground="{DynamicResource MaterialDesignLightForeground}" />
                                <MenuItem Command="Copy"
                                          Header="_Copy"
                                          Foreground="{DynamicResource MaterialDesignLightForeground}"
                                          Icon="{materialDesign:PackIcon Kind=ContentCopy}" />
                                <MenuItem Command="Paste"
                                          Header="_Paste"
                                          Foreground="{DynamicResource MaterialDesignLightForeground}"
                                          Icon="{materialDesign:PackIcon Kind=ContentPaste}" />
                            </MenuItem>
                        </Menu>
                        <Button Width="50"
                                Height="50"
                                Margin="0,0,15,0"
                                Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                                Style="{StaticResource MaterialDesignToolButton}"
                                ToolTip="Account">
                            <Image Width="40"
                                   Height="40"
                                   Source="/Image/Cat.jpg">
                                <Image.Clip>
                                    <EllipseGeometry Center="20,20"
                                                     RadiusX="20"
                                                     RadiusY="20" />
                                </Image.Clip>
                            </Image>
                        </Button>
                    </StackPanel>
                    <ToggleButton VerticalAlignment="Center"
                                  x:Name="SettingMenuToggleButton"
                                  Margin="8,0,0,0"
                                  IsChecked="False"
                                  Content="{materialDesign:PackIcon Kind=HomeAnalytics,Size=26}"
                                  Style="{StaticResource MaterialDesignActionToggleButton}" />
                    <Menu Margin="5,0,0,0"
                          VerticalAlignment="Center">
                        <MenuItem Header="Menu"
                                  Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
                            <MenuItem Header="Item 1"
                                      Foreground="{DynamicResource MaterialDesignLightForeground}" />
                            <MenuItem Header="Item 2"
                                      Foreground="{DynamicResource MaterialDesignLightForeground}" />
                            <MenuItem Header="Item 3"
                                      Foreground="{DynamicResource MaterialDesignLightForeground}" />
                        </MenuItem>
                        <MenuItem Header="Focus"
                                  Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
                            <MenuItem Header="Config"
                                      Foreground="{DynamicResource MaterialDesignLightForeground}"
                                      Command="{Binding ButtonCommand}"
                                      CommandParameter="ConfigView" />
                        </MenuItem>
                        <MenuItem Header="Material Design"
                                  Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
                            <MenuItem Header="123"
                                      Foreground="{DynamicResource MaterialDesignLightForeground}"
                                      Command="{Binding ButtonCommand}"
                                      CommandParameter="ConfigView" />
                        </MenuItem>
                    </Menu>
                </DockPanel>
            </materialDesign:ColorZone>
            <StackPanel Grid.Row="1">
                <ContentControl prism:RegionManager.RegionName="{x:Static extension:EventRegionManager.MainWindowRegionName}" />
            </StackPanel>
        </Grid>
    </materialDesign:DrawerHost>
</Window>

3.14 Background

    <UserControl.Background>
        <ImageBrush
            ImageSource="/Image/Login02.jpg"
            Opacity="0.8"
            Stretch="Fill" />
    </UserControl.Background>
    <prism:Dialog.WindowStyle>
        <Style TargetType="Window">
            <Setter Property="Width" Value="880" />
            <Setter Property="Height" Value="450" />
            <Setter Property="SizeToContent" Value="WidthAndHeight" />
            <Setter Property="ResizeMode" Value="NoResize" />
            <Setter Property="prism:Dialog.WindowStartupLocation" Value="CenterScreen" />
        </Style>
    </prism:Dialog.WindowStyle>

【6月日新计划14】WPF入门-搭配Material Design，項目實戰

【6月日新计划14】WPF入门-搭配Material Design,項目實戰

1.Install Material Design

2. Index Page

3.Project

3.1 Windows Config

3.2 Button Style

3.3 圓角

3.4 如何佈局,靠邊

3.5 圖層

3.6 循環遍歷

3.7 ScrollViewer

3.8 文本框提示

3.9 DrawerHost

3.10 划線

3.11 按鈕彈窗

3.12 設置默認首頁

3.13 MainWindow

3.14 Background