WPF - 簡單的UI框架

實現了一個簡單的WPF應用程序UI框架 ，分享出來。界面效果圖如下：

運行效果如下：

 

打算持續更新，將左側面板所有功能模塊全給實現了。

喜歡的可以下載源碼體驗：https://github.com/DuelWithSelf/WPFEffects

       左側分類導覽按鈕爲自定義的CustomControl， 參照ListBox的模式。 爲了偷懶，暫時未深度封裝，先用StackPanel承載，先用上再說，效果還不錯

 <StackPanel x:Name="SpNavItems">
     <CustomFrms:ListMenuBox Text="組件" IconData="{StaticResource PathData.SettingsOutline}">
         <CustomFrms:ListMenuItem Text="PathIcon" Key="PathData"/>
     </CustomFrms:ListMenuBox>
     <CustomFrms:ListMenuBox Text="效果" IconData="{StaticResource PathData.Creation}">
         <CustomFrms:ListMenuItem Text="文字效果" Key="TextblockEffect"/>
     </CustomFrms:ListMenuBox>
     <CustomFrms:ListMenuBox Text="富媒體牆" IconData="{StaticResource PathData.Clover}">
         <CustomFrms:ListMenuItem Text="弧形旋轉" Key="Carousel"/>
         <CustomFrms:ListMenuItem Text="弧形旋轉3D" Key="Carousel3D"/>
         <CustomFrms:ListMenuItem Text="線點動畫" Key="AnimLine"/>
     </CustomFrms:ListMenuBox>
     <CustomFrms:ListMenuBox Text="圖表" IconData="{StaticResource PathData.ChartScatterplotHexbin}">
         <CustomFrms:ListMenuItem Text="柱狀圖" Key="HistogramChart"/>
         <CustomFrms:ListMenuItem Text="餅狀圖" Key="PieChart"/>
         <CustomFrms:ListMenuItem Text="弧形圖" Key="RadianChart"/>
     </CustomFrms:ListMenuBox>
     <CustomFrms:ListMenuBox Text="圖像處理" IconData="{StaticResource PathData.FileImageRegular}">
         <CustomFrms:ListMenuItem Text="圖片分隔" Key="ImgCoordinate"/>
     </CustomFrms:ListMenuBox>
     <CustomFrms:ListMenuBox Text="性能優化" IconData="{StaticResource PathData.BroomSolid}">
         <CustomFrms:ListMenuItem Text="圖片加載建議" Key="ImagePerformance"/>
         <CustomFrms:ListMenuItem Text="圖片加載反例" Key="ImagePerformance2"/>
     </CustomFrms:ListMenuBox>
 </StackPanel>

自定義的樣式： 

<Style TargetType="{x:Type CustomFrms:ListMenuBox}">
    <Setter Property="IconWidth" Value="14"/>
    <Setter Property="IconHeight" Value="14"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="NormalBrush" Value="{StaticResource ColorBrush.MiddleWhite}"/>
    <Setter Property="FocusBrush" Value="White"/>
    <Setter Property="BorderBrush" Value="White"/>
    <Setter Property="FocusBackground" Value="{StaticResource ColorBrush.LightWhite}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CustomFrms:ListMenuBox}">
                <Border x:Name="Part_BdrContainer" Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <Grid x:Name="Part_Header" Height="40" Background="Transparent" VerticalAlignment="Top">
                            <Path x:Name="Part_Icon" Margin="15,0,0,0" 
                                      Width="{Binding Path=IconWidth, RelativeSource={RelativeSource TemplatedParent}}"
                                      Height="{Binding Path=IconHeight, RelativeSource={RelativeSource TemplatedParent}}"
                                      Data="{Binding Path=IconData, RelativeSource={RelativeSource TemplatedParent}}"
                                      Fill="{Binding Path=NormalBrush, RelativeSource={RelativeSource TemplatedParent}}"
                                      Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBlock x:Name="Part_Title" Padding="{Binding Path=TextPadding, RelativeSource={RelativeSource TemplatedParent}}"
                                           FontSize="{Binding Path=FontSize, RelativeSource={RelativeSource TemplatedParent}}" 
                                           HorizontalAlignment="Left" VerticalAlignment="Center" Margin="50,0,0,0"
                                           Foreground="{Binding Path=NormalBrush, RelativeSource={RelativeSource TemplatedParent}}"
                                           Text="{Binding Path=Text, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Path x:Name="Part_Arrow" Data="M0,20 L10,10 L0,0 L0,1 L9,10 L0,19 L0,20 V20 H10 Z"
                                      Width="6" Height="12" Stretch="Fill" 
                                      Fill="{Binding Path=NormalBrush, RelativeSource={RelativeSource TemplatedParent}}" 
                                      HorizontalAlignment="Right" Margin="0,0,15,0" VerticalAlignment="Center">
                                    <Path.RenderTransform>
                                        <TransformGroup>
                                            <RotateTransform Angle="0"/>
                                        </TransformGroup>
                                    </Path.RenderTransform>
                                </Path>
                        </Grid>
                        <StackPanel x:Name="Part_ItemsContainer" Margin="0,40,0,0" Height="0">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </StackPanel>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter TargetName="Part_Icon" Property="Fill" 
                                    Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="Part_Title" Property="Foreground" 
                                    Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="Part_Arrow" Property="Fill" 
                                    Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="Part_BdrContainer" Property="Background" 
                                    Value="{Binding Path=FocusBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="Part_BdrContainer" Property="BorderThickness" 
                                    Value="2,0,0,0"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Part_Icon" Property="Fill" 
                                    Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="Part_Title" Property="Foreground" 
                                    Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="Part_Arrow" Property="Fill" 
                                    Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="Part_BdrContainer" Property="Background" 
                                    Value="{Binding Path=FocusBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="Part_BdrContainer" Property="BorderThickness" 
                                    Value="2,0,0,0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>