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

執行效果如下：

喜歡的可以下載原始碼參考：https://github.com/DuelWithSelf/WPFEffects

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

 <StackPanel x:Name="SpNavItems">
     <CustomFrms:ListMenuBox Text="支援作者" IconData="{StaticResource PathData.Heart}
 
" 
                             Key="AboutMe"/>
     <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>
     <CustomFrms:ListMenuBox Text="穿幫硬廣" IconData="{StaticResource PathData.Bullhorn}"
                             Key="Advertise"/>
 </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" 
                                      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"
                                           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,19 L0,20 V20 H10 Z"
                                      Width="6" Height="12" Stretch="Fill" 
                                      Fill="{Binding Path=NormalBrush,RelativeSource={RelativeSource TemplatedParent}}" 
                                      HorizontalAlignment="Right" Margin="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" 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"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Part_Icon" Property="Fill" 
                                    Value="{Binding Path=FocusBrush,0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

打算持續更新，將左側面板所有功能模組全給實現了。比如已實現的：