WPF中采用MVVM模式编写win10中的便签样式

首先引入MVVM模式

win10的界面便笺设计

首先设计主窗体的mainwindow.xmal的样式

• 这个button控件是图像按钮----采用SVG引入
  -如何引入SVG图像

• 在阿里巴巴矢量库(iconfont矢量图)中先去下载用的素材，下载之后解压后是这样的
  

• 在项目中引入SVG的步骤

• .ttf文件的的添加—>APP.xmal中引入iconfont.ttf—>运用到事例中去
  
  

子页面的样式

MainWindow.xmal样式代码

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid x:Name="header"
              Grid.Row="0"
              Panel.ZIndex="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button x:Name="creatButton"
                    Grid.Column="0"
                    Width="40"
                    Height="40"
                    Click="creatButton_Click"
                    Content="&#xe627;"
                    FontFamily="{DynamicResource Iconfont}"
                    FontSize="16"
                    Style="{DynamicResource Button_Icon}" />
            <Grid x:Name="title"
                  Grid.Column="1"
                  Background="Transparent" />
            <StackPanel Grid.Column="2" Orientation="Horizontal">
                <Button x:Name="settingButton"
                        Width="40"
                        Height="40"
                        Content="&#xe60b;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="16"
                        Style="{DynamicResource Button_Icon}" />
                <Button x:Name="closeButton"
                        Width="40"
                        Height="40"
                        Click="closeButton_Click"
                        Content="&#xe742;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="16"
                        Style="{DynamicResource Button_Icon}" />
            </StackPanel>
        </Grid>
        <TextBlock Grid.Row="1"
                   Margin="10,5"
                   VerticalAlignment="Center"
                   FontFamily="微软雅黑"
                   FontSize="22"
                   FontWeight="Bold"
                   Text="便笺" />
        <Controls:SerachBar Grid.Row="2" />
        <StackPanel Grid.Row="3">
            <ListBox Width="300"
                     Height="490"
                     ItemsSource="{Binding NoteTextProperty}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Background="{Binding Background}">
                            <StackPanel>
                                <TextBlock Width="300"
                                           Height="100"
                                           FontSize="{Binding FontSize}"
                                           Text="{Binding Content}"
                                           TextWrapping="Wrap" />
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="SelectionChanged">
                        <vm:EventToCommand Command="{Binding TextCommand}" PassEventArgsToCommand="True" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </ListBox>
        </StackPanel>
    </Grid>

NoteWindow.xmal样式代码

 <Grid Background="#D3D3D3">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Background="#696969">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button x:Name="creatButton"
                    Grid.Column="0"
                    Width="40"
                    Height="40"
                    Click="creatButton_Click"
                    Content="&#xe627;"
                    FontFamily="{DynamicResource Iconfont}"
                    FontSize="16"
                    Style="{DynamicResource Button_Icon}" />
            <Grid x:Name="title"
                  Grid.Column="1"
                  Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="17*" />
                    <RowDefinition Height="23*" />
                </Grid.RowDefinitions>
            </Grid>
            <StackPanel Grid.Column="2" Orientation="Horizontal">
                <Button x:Name="settingButton"
                        Width="40"
                        Height="40"
                        Click="settingButton_Click"
                        Content="&#xe609;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="16"
                        Style="{DynamicResource Button_Icon}" />
                <Popup x:Name="settingPop1"
                       AllowsTransparency="True"
                       HorizontalOffset="-350"
                       Placement="Bottom"
                       PlacementTarget="{Binding ElementName=settingButton}">
                    <Grid Width="430" Height="78">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <RadioButton Grid.Column="0"
                                     IsChecked="True"
                                     Style="{DynamicResource RadioThemeColor}" />
                        <RadioButton Grid.Column="1"
                                     Background="Bisque"
                                     Style="{DynamicResource RadioThemeColor}" />
                        <RadioButton Grid.Column="2"
                                     Background="LightBlue"
                                     Style="{DynamicResource RadioThemeColor}" />
                        <RadioButton Grid.Column="3"
                                     Background="White"
                                     Style="{DynamicResource RadioThemeColor}" />
                        <RadioButton Grid.Column="4"
                                     Background="Gray"
                                     Style="{DynamicResource RadioThemeColor}" />
                    </Grid>
                </Popup>
                <Button x:Name="closeButton"
                        Width="40"
                        Height="40"
                        Click="closeButton_Click"
                        Content="&#xe742;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="16"
                        Style="{DynamicResource Button_Icon}" />
            </StackPanel>
        </Grid>
        <TextBox x:Name="noteText"
                 Grid.Row="1"
                 Background="{Binding Background}"
                 FontFamily="{Binding FontFamily}"
                 FontSize="{Binding FontSize}"
                 Text="{Binding Content, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
                 TextWrapping="Wrap" AcceptsReturn="True" />
        <Grid Grid.Row="2" Background="#BEBEBE">
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal ">
                <Button x:Name="boldButton"
                        Width="40"
                        Height="40"
                        Content="&#xe611;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="14"
                        Style="{DynamicResource Button_Icon}" />
                <Button x:Name="tiltButton"
                        Width="40"
                        Height="40"
                        Content="&#xe608;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="16"
                        Style="{DynamicResource Button_Icon}" />
                <Button x:Name="UnderscoreButton"
                        Width="40"
                        Height="40"
                        Content="&#xe628;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="20"
                        Style="{DynamicResource Button_Icon}" />
                <Button x:Name="deleteButton"
                        Width="40"
                        Height="40"
                        Content="&#xe605;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="14"
                        Style="{DynamicResource Button_Icon}" />
                <Button x:Name="projectButton"
                        Width="40"
                        Height="40"
                        Content="&#xe6c1;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="12"
                        Style="{DynamicResource Button_Icon}" />
                <Button x:Name="imageButton"
                        Width="40"
                        Height="40"
                        Content="&#xe616;"
                        FontFamily="{DynamicResource Iconfont}"
                        FontSize="22"
                        Style="{DynamicResource Button_Icon}" />
            </StackPanel>
        </Grid>
    </Grid>