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>

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

  • 相关阅读:
    Spring-四种常用注解
    Spring-IOC
    Spring-bean 的管理细节
    Android R.java文件
    MySQL | windows10 安装MySQL : 无法将“mysql”项识别为 cmdlet、函数、脚本....
    统计知识 | 决定系数 R方、调整后的R方、F值
    R | R语言表达式中常用的符号
    回归分析 | R语言回归算法、模型诊断
    R | 探索性数据分析 EDA
    R语言基础 | 概率分布的表示方法
  • 原文地址:https://www.cnblogs.com/duel/p/wpf_ui.html
Copyright © 2011-2022 走看看