WPF-USB迷|专注于互联网分享

WPF

实现了一个简单的WPF应用程序UI框架，分享出来。界面效果图如下：

运行效果如下：

打算持续更新，将左侧面板所有功能模块全给实现了。

喜欢的可以下载源码体验：

左侧分类导览按钮为自定义的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>

WPF

实现了一个简单的WPF应用程序UI框架，分享出来。界面效果图如下：

运行效果如下：

打算持续更新，将左侧面板所有功能模块全给实现了。

喜欢的可以下载源码体验：

左侧分类导览按钮为自定义的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>

USB迷 | 专注于互联网分享

WPF

WPF

WPF

与本文相关的文章

评论列表 (0)