zoukankan      html  css  js  c++  java
  • WPF

    实现了一个简单的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,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>

    打算持续更新,将左侧面板所有功能模块全给实现了。比如已实现的:

  • 相关阅读:
    slf4j中的MDC
    redis incr incrby decr decrby命令
    Java接口响应超时监控
    JDK1.7.0_45源码阅读<java.lang.Boolean>
    Debug JDK变量显形
    Java全角、半角字符的关系以及转换
    模型选择
    经验风险最小化
    支持向量机(下)
    支持向量机(上)
  • 原文地址:https://www.cnblogs.com/duel/p/wpf_ui.html
Copyright © 2011-2022 走看看