精华内容
下载资源
问答
  • WPF界面设计

    2018-02-11 09:21:29
    WPF界面设计和几个开源的UI界面库 WPF界面设计和几个开源的UI界面库 WPF界面设计和几个开源的UI界面库
  • wpf界面设计

    2021-11-24 16:43:56
    WPF的数据绑定与Presentation Model相集合是非常好的做法,使得开发人员可以将View和逻辑分离出来,是WPF所特有的,所以我们又称之为Model-View-ViewModel (MVVM)。这种模式跟经典的MVP(Model-View-Presenter)模式很...

    WPF的数据绑定与Presentation Model相集合是非常好的做法,使得开发人员可以将View和逻辑分离出来,是WPF所特有的,所以我们又称之为Model-View-ViewModel (MVVM)。这种模式跟经典的MVP(Model-View-Presenter)模式很相似,除了你需要一个为View量身定制的Model,这个Model就是ViewModel。ViewModel包含所有由UI特定的接口和属性,并由一个ViewModel的视图的绑定属性,并可获得二者之间的松散耦合,所以需要在ViewModel直接更新视图中编写相应代码。数据绑定系统还支持提供了标准化的方式传输到视图的验证错误的输入的验证。

    在视图(View)部分,通常也就是一个Aspx页面。MVP里的M其实和MVC里的M是相似的,都是封装了核心数据、逻辑和功能的计算关系的模型,而V是视图(窗体),P就是封装了窗体中的所有操作、响应用户的输入输出、事件等,与MVC里的C差不多,区别是MVC是系统级架构的,而MVP是用在某个特定页面上的,也就是说MVP的灵活性要远远大于MVC,实现起来也极为简单。从IView这个interface层来解析,它可以把各类UI与逻辑层解耦,同时可以从UI层进入自动化测试自动化测试(Unit/Automatic Test)并提供了入口,在以前可以由Win Form/Web和Form/MFC等编写的UI是通过事件Windows消息与IView层沟通的。WPF与IView层的沟通,最佳的手段是使用Binding,也可以使用事件;Presenter层要实现IView,多态机制可以保证运行时UI层显示恰当的数据。比如在程序中绑定, Binding的Source是某个interface类型的变量,实际上,这个interface变量引用着的对象才是真正的数据源。这些模式也是依次进化而形成MVC—>MVP—>MVVM。IView作为公共视图接口约束的一层意思,View则能传达解耦的一层意思。

    因为WPF技术出现,从而使MVP设计模式有所改进,MVVM模式便是使用的是数据绑定基础架构,它们可以轻松构建UI的必要元素。View绑定到ViewModel,然后执行一些命令在向它请求一个动作。而反过来,ViewModel跟Model通讯,告诉它更新来响应UI,这样便使得为应用构建UI非常的容易。往一个应用程序上贴一个界面越容易,外观设计师就越容易使用Blend来创建一个漂亮的界面。同时,当UI和功能越来越松耦合的时候,功能的可测试性就越来越强。在MVP模式中,为了让UI层能够从逻辑层上分离下来,设计师们在UI层与逻辑层之间加了一层interface。无论是UI开发人员还是数据开发人员,都要尊重这个契约、按照它进行设计和开发。这样,理想状态下无论是Web UI还是Window UI就都可以使用同一套数据逻辑了。借鉴MVP的IView层,View Model比Presenter更恰当;而把一些跟事

    展开全文
  • 3维球控制的WPF界面UI设计,效果很好
  • WPF超酷界面设计

    热门讨论 2016-01-11 14:43:33
    一款WPF超酷界面设计演示(内含程序源代码)。
  • .Net课程的小项目,使用WPF进行界面设计,模拟手机部分功能
  • WPF界面设计辅助工具--Blend

    千次阅读 2020-03-17 11:52:05
    1、Blend是一款用于设计桌面和Web应用用户界面的可视化工具,用于UI设计,其功能和PS类似,但是比PS强大。其可以快速、精细地绘制图片,并可以生成.XAML文件,以便给VS工程使用。 2、VS自带有一款bl...

    篇外:Blend可以用来探究不熟悉控件组成结构

    转自:https://blog.csdn.net/xpj8888/article/details/82715409

    一、什么是Blend?

    1、Blend是一款用于设计桌面和Web应用用户界面的可视化工具,用于UI设计,其功能和PS类似,但是比PS强大。其可以快速、精细地绘制图片,并可以生成.XAML文件,以便给VS工程使用。

    2、VS自带有一款blend for visual studio,其是专门用来做WPF、Metro等的界面设计。其目的让做界面和后台的程序分开。VS与Blend之间,可以在菜单栏-视图 中自由切换使用。

    3、blend for visual studio可以导入PS文件或其他图片,进一步加工成矢量图,并生成.xAMLW文件,给WPF、Metro等工程使用。

    4、blend for visual studio和DrawingBrush常常结合一起使用,来制作自定义图片的。lend for visual studio初步生成粗略的.xaml代码,然后作为DrawingBrush自定义图片的一部分,最后在DrawingBrush自定义图片的中,对代码进行细化。综合来说,前期可以用Blend快速生成代码,后期可以用DrawingBrush把这些代码综合起来。

    5、Blend 基础/样式/模板/控件模板/

    https://www.cnblogs.com/clockdotnet/p/4188489.html

    https://www.cnblogs.com/clockdotnet/p/4188530.html

    https://www.cnblogs.com/clockdotnet/p/4188594.html

    https://www.cnblogs.com/clockdotnet/p/4188607.html

    https://www.cnblogs.com/clockdotnet/p/4320535.html

    6、微软官网 使用 Blend for Visual Studio 创建 UI

    https://msdn.microsoft.com/zh-cn/library/jj171012.aspx

    7、Blend经典入门教程

    https://wenku.baidu.com/view/ef2c321b58eef8c75fbfc77da26925c52cc59107.html

    二、blend for visual studio与WPF的关系?

    blend for visual studio快速生成UI给WPF工程使用,使得界面和后台的程序分开。

    三、Blend如何快速生成xaml代码,即Path数据?

    方法1:Blend图片文件转换为xaml代码的Path数据。

    https://blog.csdn.net/dh164645822/article/details/77155701?fps=1&locationNum=8

    Blend 2013版可以导入.PSD文件,但是Blend 2015版不能导入.PSD文件。因此软件工具需切换为 Expression Design:

    https://www.cnblogs.com/lvdongjie/p/5479718.html

    方法2:Blend工具可以自己画图,然后生成xaml代码的Path数据。该方法在我的后面几篇博客上,已经更加详细的阐述了。

    https://blog.csdn.net/xpj8888/article/category/8094222

    展开全文
  • wpf界面设计技巧

    2012-08-30 15:04:21
    wpf界面设计技巧,希望对大家有些帮助哦,哈哈。
  • Metro风格 WPF界面设计

    2016-02-02 11:10:06
    Metro风格 WPF界面设计 WPF设计
  • wpf登录界面设计

    2017-08-23 20:17:56
    wpf 直接跑起来的源代码 仿2013登录界面
  • WPF界面设计—撸大师

    万次阅读 2012-05-13 19:47:56
    WPF界面设计,模仿了金山卫士,360,鲁大师的界面! <Rectangle Fill="{DynamicResource {x:Static Syst



    WPF界面设计,模仿了金山卫士,360,鲁大师的界面!


    	<!--无边框窗体-->
    	<Style x:Key="NoResize_window" TargetType="{x:Type Window}">  
        <Setter Property="AllowsTransparency" Value="true"/>  
        <Setter Property="Background" Value="Transparent"/>  
        <Setter Property="FontFamily" Value="Consolas, Microsoft YaHei"/>  
        <Setter Property="FontSize" Value="24"/>  
        <Setter Property="ResizeMode" Value="NoResize"/>  
        <Setter Property="WindowStyle" Value="None"/>  
        <Setter Property="Template">  
            <Setter.Value>  
                <ControlTemplate TargetType="{x:Type Window}">  
                    <Grid Margin="10">  
                    	<Rectangle Fill="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"  
                    		RadiusX="3" RadiusY="3">  
                    		<Rectangle.Effect>  
                    			<DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="#FF898989"/>  
                    		</Rectangle.Effect>  
                    	</Rectangle>  
                    	<Border Background="{TemplateBinding Background}"  
                    		BorderBrush="{TemplateBinding BorderBrush}"  
                    		BorderThickness="{TemplateBinding BorderThickness}"  
                    		Padding="{TemplateBinding Margin}"  
                    		SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"  
                    		CornerRadius="3">  
                    		<ContentPresenter />  
                    	</Border>  
                    </Grid>  
                </ControlTemplate>  
            </Setter.Value>  
        </Setter>  
    </Style>  

    	<!--TabControl样式资源-->
    	<Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}">
    		<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    		<Setter Property="Padding" Value="4,4,4,4"/>
    		<Setter Property="BorderThickness" Value="1"/>
    		<Setter Property="BorderBrush" Value="#8C8E94"/>
    		<Setter Property="Background" Value="#F9F9F9"/>
    		<Setter Property="HorizontalContentAlignment" Value="Center"/>
    		<Setter Property="VerticalContentAlignment" Value="Center"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="{x:Type TabControl}">
    					<Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
    						<Grid.RowDefinitions>
    							<RowDefinition x:Name="RowDefinition0" Height="Auto" MinHeight="102.5"/>
    							<RowDefinition x:Name="RowDefinition1"/>
    						</Grid.RowDefinitions>
    						<Border x:Name="ContentPanel" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
    							<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    						</Border>
    						<Canvas x:Name="HeaderPanel" HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" Width="Auto" IsItemsHost="True"/>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    

    下载链接

    展开全文
  • 应用程序使用统计信息 - .NET CORE(C#) WPF界面设计 首发文章地址:https://dotnet9.com/10546.html 关键功能点 抽屉式菜单 圆形进度条 Demo演示: 1. 新建项目 使用 VS 2019 的 .NET Core 3.1 WPF 项目模板,...

    应用程序使用统计信息 - .NET CORE(C#) WPF界面设计

    首发文章地址:https://dotnet9.com/10546.html

    关键功能点

    1. 抽屉式菜单
    2. 圆形进度条

    Demo演示:

    1. 新建项目

    使用 VS 2019 的 .NET Core 3.1 WPF 项目模板,创建名为 “MobileAppUsageDashboardCore” 的项目,NuGet 引入 MaterialDesign 的两个库 MaterialDesignThemes 和 MaterialDesignColors,整个项目工程文件如下:

    <Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">
    
      <PropertyGroup>
        <OutputType>WinExe</OutputType>
        <TargetFramework>netcoreapp3.1</TargetFramework>
        <UseWPF>true</UseWPF>
      </PropertyGroup>
    
      <ItemGroup>
        <PackageReference Include="MaterialDesignColors" Version="1.2.2" />
        <PackageReference Include="MaterialDesignThemes" Version="3.0.1" />
      </ItemGroup>
    
    </Project>
    

    2.抽屉式菜单

    前面发过不少抽屉式菜单的Demo文章,套路都是一个竖直菜单隐藏在界面左边边界之外,左边边界留一个菜单按钮,点击该按钮呼出竖直菜单,即达到抽屉式菜单效果。

    本文介绍的抽屉式菜单也不外如是,VS设计界面见上图,使用的MD控件的DrawerHost.LeftDrawerContent组件,换一种方式实现,下面是抽屉菜单布局代码:

    <materialDesign:DrawerHost.LeftDrawerContent>
        <StackPanel Orientation="Vertical">
            <StackPanel Margin="10" VerticalAlignment="Top" Orientation="Horizontal">
                <TextBlock
                    VerticalAlignment="Center"
                    Margin="0,0,10,0">Dashboard</TextBlock>
                <Button Style="{StaticResource MaterialDesignFlatButton}"
                        Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
                        >
                    <materialDesign:PackIcon Kind="HamburgerMenuBack"></materialDesign:PackIcon>
                </Button>
            </StackPanel>
            <StackPanel Orientation="Vertical">
                <Button Style="{StaticResource MaterialDesignFlatButton}" Click="todayBtnClicked">今天</Button>
                <Button Style="{StaticResource MaterialDesignFlatButton}" Click="weekBtnClicked">本周</Button>
                <Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">本月</Button>
            </StackPanel>
        </StackPanel>
    </materialDesign:DrawerHost.LeftDrawerContent>
    

    跟随菜单隐藏的还有一个菜单关闭按钮,见上面代码中的第一个按钮,点击按钮触发 “DrawerHost.CloseDrawerCommand” 命令可关闭抽屉式菜单。

    下面的是窗体边界之内的菜单按钮,点击则展开抽屉式菜单,触发的命令是“DrawerHost.OpenDrawerCommand”:

    <Button Style="{StaticResource MaterialDesignFlatButton}" Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            >
                                <materialDesign:PackIcon Kind="HamburgerMenu"></materialDesign:PackIcon>
                            </Button>
    

    3.圆形进度条

    使用MD控件库实现圆形进度条,效果如下:

    圆形进度条代码如下,使用的还是 ProgressBar 控件,样式使用了MD控件库的“MaterialDesignCircularProgressBar” 样式,组件加载时(Loaded事件),使用了双精度动画:

    <ProgressBar Height="100"
                Width="100"
    Value="40" Foreground="#FF68E843"
            x:Name="firstProgress"
                >
        <ProgressBar.Style>
            <Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="40"
                                                Duration="0:0:0.5"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </ProgressBar.Style>
    </ProgressBar>
    

    4. Demo源码

    整个Demo也不难,除了上面两个小功能单独简单说说外,其他的就是一般的布局代码了,主界面XAML代码如下:

    <Window x:Class="MobileAppUsageDashboardCore.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            TextElement.Foreground="{DynamicResource MaterialDesignBody}"
            TextElement.FontWeight="Regular"
            TextElement.FontSize="13"
            TextOptions.TextFormattingMode="Ideal"
            TextOptions.TextRenderingMode="Auto"
            Background="{DynamicResource MaterialDesignPaper}"
            FontFamily="{DynamicResource MaterialDesignFont}"
            Title="应用程序使用统计信息" Height="450" Width="800" 
            WindowStartupLocation="CenterScreen" AllowsTransparency="True" WindowStyle="None" MouseLeftButtonDown="dragME">
        <materialDesign:DrawerHost x:Name="mainDrawer">
            <materialDesign:DrawerHost.LeftDrawerContent>
                <StackPanel Orientation="Vertical">
                    <StackPanel Margin="10" VerticalAlignment="Top" Orientation="Horizontal">
                        <TextBlock
                            VerticalAlignment="Center"
                            Margin="0,0,10,0">Dashboard</TextBlock>
                        <Button Style="{StaticResource MaterialDesignFlatButton}"
                                Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
                                >
                            <materialDesign:PackIcon Kind="HamburgerMenuBack"></materialDesign:PackIcon>
                        </Button>
                    </StackPanel>
                    <StackPanel Orientation="Vertical">
                        <Button Style="{StaticResource MaterialDesignFlatButton}" Click="todayBtnClicked">今天</Button>
                        <Button Style="{StaticResource MaterialDesignFlatButton}" Click="weekBtnClicked">本周</Button>
                        <Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">本月</Button>
                    </StackPanel>
                </StackPanel>
            </materialDesign:DrawerHost.LeftDrawerContent>
            <materialDesign:Card HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <materialDesign:Card.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="1"/>
                        <GradientStop Color="#FF474747"/>
                    </LinearGradientBrush>
                </materialDesign:Card.Background>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="2*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="0" Orientation="Vertical" Margin="10">
                        <StackPanel Orientation="Horizontal">
                            <Button Style="{StaticResource MaterialDesignFlatButton}" Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            >
                                <materialDesign:PackIcon Kind="HamburgerMenu"></materialDesign:PackIcon>
                            </Button>
                            <TextBlock VerticalAlignment="Center" Text="移动应用使用仪表板"></TextBlock>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="时间段" VerticalAlignment="Center"></TextBlock>
                            <StackPanel Orientation="Horizontal" Margin="4">
                                <RadioButton x:Name="todayRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
                                             Margin="4"
                                             IsChecked="True"
                                             Content="今天"></RadioButton>
                                <RadioButton x:Name="weekRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
                                             Margin="4"
                                             IsChecked="False"
                                             Content="本周"></RadioButton>
                                <RadioButton x:Name="monthRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
                                             Margin="4"
                                             IsChecked="False"
                                             Content="本月"></RadioButton>
                            </StackPanel>
                        </StackPanel>
                        <UniformGrid Columns="3" Margin="0,10,0,0">
                            <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="2*"></RowDefinition>
                                        <RowDefinition Height="*"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <ProgressBar Height="100"
                                             Width="100"
                                    Value="40" Foreground="#FF68E843"
                                            x:Name="firstProgress"
                                             >
                                        <ProgressBar.Style>
                                            <Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
                                                <Style.Triggers>
                                                    <EventTrigger RoutedEvent="Loaded">
                                                        <BeginStoryboard>
                                                            <Storyboard>
                                                                <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="40"
                                                                             Duration="0:0:0.5"></DoubleAnimation>
                                                            </Storyboard>
                                                        </BeginStoryboard>
                                                    </EventTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </ProgressBar.Style>
                                    </ProgressBar>
                                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="2 小时 / 5 小时"></TextBlock>
                                    <TextBlock Grid.Row="1" Text="百度" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                                </Grid>
                            </materialDesign:TransitioningContent>
                            <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
    
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="2*"></RowDefinition>
                                        <RowDefinition Height="*"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <ProgressBar Height="100"
                                             Width="100"
                                            Value="70" Foreground="#FFE84343"
                                            x:Name="secondProgress" Margin="14,-1,13,1"
                                             >
                                        <ProgressBar.Style>
                                            <Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
                                                <Style.Triggers>
                                                    <EventTrigger RoutedEvent="Loaded">
                                                        <BeginStoryboard>
                                                            <Storyboard>
                                                                <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="70"
                                                                             Duration="0:0:0.5"></DoubleAnimation>
                                                            </Storyboard>
                                                        </BeginStoryboard>
                                                    </EventTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </ProgressBar.Style>
                                    </ProgressBar>
                                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="2 小时 / 3 小时"></TextBlock>
                                    <TextBlock Grid.Row="1" Text="阿里巴巴" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                                </Grid>
                            </materialDesign:TransitioningContent>
                            <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
    
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="2*"></RowDefinition>
                                        <RowDefinition Height="*"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <ProgressBar Height="100"
                                             Width="100"
                                     Value="30" Foreground="#FFE8E843"
                                            x:Name="thirdProgress"
                                             >
                                        <ProgressBar.Style>
                                            <Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
                                                <Style.Triggers>
                                                    <EventTrigger RoutedEvent="Loaded">
                                                        <BeginStoryboard>
                                                            <Storyboard>
                                                                <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="30"
                                                                             Duration="0:0:0.5"></DoubleAnimation>
                                                            </Storyboard>
                                                        </BeginStoryboard>
                                                    </EventTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </ProgressBar.Style>
                                    </ProgressBar>
                                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="1 小时 / 4 小时"></TextBlock>
                                    <TextBlock Grid.Row="1" Text="腾讯" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                                </Grid>
                            </materialDesign:TransitioningContent>
                        </UniformGrid>
                        <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn,Duration=0:0:1}">
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,80,0,0">
                                <TextBlock Text="订阅到 " VerticalAlignment="Center"></TextBlock>
                                <materialDesign:PackIcon Kind="DotNet" Foreground="#DDFF1212" Width="100" Height="100"></materialDesign:PackIcon>
                                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" Text="www.dotnet9.com" VerticalAlignment="Center"></TextBlock>
                            </StackPanel>
                        </materialDesign:TransitioningContent>
                    </StackPanel>
                    <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=SlideInFromTop}" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <materialDesign:Card VerticalAlignment="Stretch">
                            <materialDesign:Card.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF09A6A6" Offset="0"/>
                                    <GradientStop Color="#FF044D4D" Offset="1"/>
                                </LinearGradientBrush>
                            </materialDesign:Card.Background>
                            <Grid >
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid Grid.Row="0" Margin="5,15,5,5">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Column="0">
                                        <TextBlock Text="充电" HorizontalAlignment="Center"></TextBlock>
                                        <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                                                <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock>
                                                <TextBlock Text=" 次" VerticalAlignment="Center"></TextBlock>
                                            </StackPanel>
                                        </materialDesign:TransitioningContent>
                                        <TextBlock Text="最高温度" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
                                        <materialDesign:TransitioningContent 
                                            OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">
    
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                                                <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="40" HorizontalAlignment="Center"></TextBlock>
                                                <TextBlock Text=" ℃" VerticalAlignment="Center"></TextBlock>
                                            </StackPanel>
                                        </materialDesign:TransitioningContent>
                                        <TextBlock Text="解锁" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
                                        <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}">
                                            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"  Text="75" HorizontalAlignment="Center" Margin="0,10,0,0"></TextBlock>
                                        </materialDesign:TransitioningContent>
                                    </StackPanel>
    
                                    <StackPanel Grid.Column="1">
                                        <TextBlock Text="开机" HorizontalAlignment="Center"></TextBlock>
                                        <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">
    
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                                                <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="6" HorizontalAlignment="Center"></TextBlock>
                                                <TextBlock Text=" 小时" VerticalAlignment="Center"></TextBlock>
                                            </StackPanel>
                                        </materialDesign:TransitioningContent>
                                        <TextBlock Text="最后一次充电" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
                                        <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                                                <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock>
                                                <TextBlock Text=" 小时以前" VerticalAlignment="Center"></TextBlock>
                                            </StackPanel>
                                        </materialDesign:TransitioningContent>
                                        <TextBlock Text="通知" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
                                        <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}">
                                            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"  Text="350" HorizontalAlignment="Center" Margin="0,10,0,0"></TextBlock>
                                        </materialDesign:TransitioningContent>
                                    </StackPanel>
                                </Grid>
                                <Grid Grid.Row="1" Background="#FF086666">
                                    <Grid.RowDefinitions>
                                        <RowDefinition></RowDefinition>
                                        <RowDefinition></RowDefinition>
                                        <RowDefinition></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <StackPanel Orientation="Vertical" Grid.Row="0" Margin="5,15,5,5">
                                        <Grid>
                                            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="存储" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                            <TextBlock Text="19.88 GB / 40 GB" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock>
                                        </Grid>
                                        <ProgressBar Height="10" Value="19.88" Maximum="40" Margin="0,10,0,0" Foreground="#FF1E1E1E"></ProgressBar>
                                    </StackPanel>
                                    <StackPanel Orientation="Vertical" Grid.Row="1" Margin="5,15,5,5">
                                        <Grid>
                                            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" 
                                                       Text="相册" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                            <TextBlock Text="3 GB" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock>
                                        </Grid>
                                        <ProgressBar Height="10" Value="3" Maximum="40" Margin="0,10,0,0" Foreground="#FF1E1E1E"></ProgressBar>
                                    </StackPanel>
                                    <StackPanel Orientation="Vertical" Grid.Row="2" Margin="5,15,5,5">
                                        <Grid>
                                            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="视频" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                            <TextBlock Text="4 GB" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock>
                                        </Grid>
                                        <ProgressBar Height="10" Value="4" Maximum="40" Margin="0,10,0,0" Foreground="#FF1E1E1E"></ProgressBar>
                                    </StackPanel>
                                </Grid>
                            </Grid>
    
                        </materialDesign:Card>
                    </materialDesign:TransitioningContent>
                    <!--<TextBlock Style="{DynamicResource MaterialDesignTitleTextBlock}">My First Material Design App</TextBlock>-->
                    <materialDesign:TransitioningContent Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Top" OpeningEffect="{materialDesign:TransitionEffect Kind=SlideInFromTop}">
                        <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="最常用的应用程序" Margin="0,15,0,0"></TextBlock>
                    </materialDesign:TransitioningContent>
                    <materialDesign:TransitioningContent 
                        Grid.Column="2"
                        OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn}" Margin="0,40,0,0">
                        <ItemsControl>
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <UniformGrid Columns="2"></UniformGrid>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                                <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Google Chrome">
                                    <materialDesign:PackIcon Kind="GoogleChrome" Height="24" Width="24" ></materialDesign:PackIcon>
                                </Button>
                            </materialDesign:TransitioningContent>
                            <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
    
                                <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="YouTube">
                                    <materialDesign:PackIcon Kind="Youtube" Height="24" Width="24"></materialDesign:PackIcon>
                                </Button>
                            </materialDesign:TransitioningContent>
                            <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                                <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Instagram">
                                    <materialDesign:PackIcon Kind="Instagram" Height="24" Width="24"></materialDesign:PackIcon>
                                </Button>
                            </materialDesign:TransitioningContent>
                            <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                                <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Facebook">
                                    <materialDesign:PackIcon Kind="Facebook" Height="24" Width="24"></materialDesign:PackIcon>
                                </Button>
                            </materialDesign:TransitioningContent>
                            <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                                <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Twitter">
                                    <materialDesign:PackIcon Kind="Twitter" Height="24" Width="24"></materialDesign:PackIcon>
                                </Button>
                            </materialDesign:TransitioningContent>
                            <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
    
                                <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="YouTube Creator Studio">
                                    <materialDesign:PackIcon Kind="YoutubeCreatorStudio" Height="24" Width="24"></materialDesign:PackIcon>
                                </Button>
                            </materialDesign:TransitioningContent>
                            <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
    
                                <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Adobe Reader">
                                    <materialDesign:PackIcon Kind="Adobe" Height="24" Width="24"></materialDesign:PackIcon>
                                </Button>
                            </materialDesign:TransitioningContent>
                            <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                                <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Camera">
                                    <materialDesign:PackIcon Kind="Camera" Height="24" Width="24"></materialDesign:PackIcon>
                                </Button>
                            </materialDesign:TransitioningContent>
                        </ItemsControl>
                    </materialDesign:TransitioningContent>
                </Grid>
            </materialDesign:Card>
    
        </materialDesign:DrawerHost>
    </Window>
    

    5. 主界面后台代码

    代码不多,比较简单,源码如下:

    using System;
    using System.Windows;
    using System.Windows.Input;
    
    namespace MobileAppUsageDashboardCore
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
            private void todayBtnClicked(object sender, RoutedEventArgs e)
            {
                mainDrawer.IsLeftDrawerOpen = false;
                todayRadio.IsChecked = true;
                monthRadio.IsChecked = false;
                weekRadio.IsChecked = false;
            }
    
            private void weekBtnClicked(object sender, RoutedEventArgs e)
            {
                mainDrawer.IsLeftDrawerOpen = false;
                todayRadio.IsChecked = false;
                weekRadio.IsChecked = true;
                monthRadio.IsChecked = false;
            }
    
            private void monthBtnClicked(object sender, RoutedEventArgs e)
            {
                mainDrawer.IsLeftDrawerOpen = false;
                todayRadio.IsChecked = false;
                weekRadio.IsChecked = false;
                monthRadio.IsChecked = true;
            }
    
            private void dragME(object sender, MouseButtonEventArgs e)
            {
                try
                {
                    DragMove();
                }
                catch (Exception)
                {
    
                    //throw;
                }
            }
        }
    }
    

    3. Demo展示、源码下载

    前面演示的Demo源码已经全部贴上。

    参考视频:WPF Dashboard UI - Material Design [Speed Design]

    参考源码:WPF-Dashboard-UI-Material-Design-Concept

    展开全文
  • WPF动态登录界面设计

    2017-11-16 17:37:34
    一个WPF动态登录界面设计的例子。图片动态显示、页面布局可以参考。
  • C# wpf界面设计基本知识

    千次阅读 2013-08-08 09:38:49
    菜单的生成 Grid> Menu Height="23" Name="menu1" Width="200" HorizontalAlignment ="Left" >  MenuItem Header =" 文件"> //一级菜单  MenuItem Header =" 打开"> //二级菜单  
  • WPF炫酷界面设计

    万次阅读 热门讨论 2017-08-26 16:23:47
    一.效果展示(多层次) 二....3.在主页面中添加按钮,按钮中嵌入图片,这样就可以在在后台动态更改界面显示的效果,每次点击都更改图片,显示出不同的图片 4.在主页面中添加ContentContro控
  • 包含各种WPF界面UI元素,包含文本框、树形结构、页面等
  • WPF界面设计基础布局常用布局属性常用布局容器GridStackPanelWrapPanelDockPanelUniformGrid控件结构样式触发器触发器的类型:控件模板——ControlTemplate数据模板——DataTemplateBinding元素绑定数据驱动UI ...
  • WPF界面设计的模式

    千次阅读 2010-06-04 23:06:00
    WPF界面设计的模式
  • WPF界面设计的方法

    千次阅读 2010-06-04 23:05:00
    WPF界面设计的方法
  • C# WPF 一个设计界面

    千次阅读 2020-01-27 12:21:36
    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏。 C# WPF 一个设计界面 今天正月初三,大家在家...一个不错的界面设计 2. 代码实现 使用 .NET Framework 4.8 创建名为...
  • 简易WPF界面制作

    2020-06-21 16:54:21
    简易WPF界面制作 WPF是微软推出的基于Windows的用户界面框架,属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架,真正做到了分离界面设计人员与开发人员的工作;同时它提供了全新的多媒体交互...
  • 一个非常漂亮且相当现代化风格的WPF界面框架
  • wpf界面菜单栏设计

    千次阅读 2019-06-12 10:55:06
    wpf配置菜单栏  WPF 内建了两种菜单——Menu 和ContextMenu(上下文菜单)。  1. Menu  Menu 的项可以是任何东西,但是你应该使用MenuItem 以及Separator 对象。   <Menu x:Name="menu" Height="23.333...
  • 使用Blend设计出符合效果的WPF界面 ...废话不多说,开始界面设计 今天拿到美工给的一个界面效果图 这个界面说实话,还可以吧,勉强说得过去。拿到界面效果图,难的两个部分都让...
  • wpf打印界面设计样式

    2016-06-17 10:22:26
    wpf打印界面设计样式,有图片截图。是项目中间的,比较好看。我没有想到这样的方法。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,756
精华内容 6,702
关键字:

wpf界面设计