本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈

那如上界面,该如何设计呢?

1、一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等。如上这种布局,在子元素数量未知的情况下,我们应该使用WrapPanel或者StackPanel来布局,子元素会自己换行。

2、然后每一行的元素中,第一个要居左,第二个要居中,第三个要居要。这个应该通过Grid来布局,添加三列,然后对应的元素在每列中设置水平方向。

下面是代码:

1、界面:

<Window x:Class="WpfApplication16.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Loaded="MainWindow_OnLoaded" Background="CornflowerBlue"> <Grid>
<ScrollViewer Margin="30,0" Height="200" Template="{StaticResource ScrollViewerControlTemplate1}">
<StackPanel x:Name="SpElementList"></StackPanel>
</ScrollViewer>
</Grid>
</Window>

其中ScrollViewer样式:

    <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border CornerRadius="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid>
<Border CornerRadius="2" Width="0.5" Background="#FF046BFF" />
<Track x:Name="PART_Track" IsDirectionReversed="true">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" Margin="4,0,4,0" Background="DodgerBlue"></Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate> <ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
<ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1"
Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"
Template="{StaticResource VerticalScrollBar}"/>
<ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
</Grid>
</ControlTemplate>

CheckBox样式:

    <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="False" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
<Setter Property="Height" Value="25"/>
<Setter Property="IsChecked" Value="{Binding IsChecked}"/>
<Setter Property="Margin" Value="0,20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
<Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
<Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
<Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
</Grid>
</Grid>
<TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
<Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

2、后台代码

用C#语言添加控件:

    public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
public List<CheckDataModel> Datas = new List<CheckDataModel>()
{
new CheckDataModel(){IsChecked = true,Name="C#"},new CheckDataModel(){IsChecked = true,Name="Java"},new CheckDataModel(){IsChecked = true,Name="Python"},
new CheckDataModel(){IsChecked = true,Name="VB.Net"},new CheckDataModel(){IsChecked = true,Name="PHP"},new CheckDataModel(){IsChecked = true,Name="WPF"},
new CheckDataModel(){IsChecked = true,Name="Silverlight"},new CheckDataModel(){IsChecked = true,Name="Winform"},new CheckDataModel(){IsChecked = true,Name="WebForm"},
new CheckDataModel(){IsChecked = true,Name="MVC"},new CheckDataModel(){IsChecked = true,Name="IOS"},new CheckDataModel(){IsChecked = true,Name="Html"},
new CheckDataModel(){IsChecked = true,Name="Css"},new CheckDataModel(){IsChecked = true,Name="Ruby"},
};
private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)
{
int index = ;
Grid grid = null;
foreach (var data in Datas)
{
int value = index%;
if (value==)
{
grid=new Grid();
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
SpElementList.Children.Add(grid);
} var checkBox=new CheckBox();
checkBox.Style = (Style) this.Resources["CheckBoxStyle"];
checkBox.HorizontalAlignment = HorizontalAlignment.Left;
checkBox.DataContext = data;
Grid.SetColumn(checkBox,value);
grid.Children.Add(checkBox);
index++;
}
}
} public class CheckDataModel
{
public string Name { get; set; }
public bool IsChecked { get; set; }
}

下面是VB语言(因为最近在学VB,就献丑一下。VB,其实VB和C#差不多)

Class MainWindow
Public Datas As New List(Of CheckDataModel)
Private Sub MainWindow_OnLoaded(sender As Object, e As RoutedEventArgs)
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Datas.Add(New CheckDataModel())
Dim grid As Grid
Dim index =
For i As Integer = To
Dim value = index Mod
If value = Then
grid = New Grid()
grid.ColumnDefinitions.Add(New ColumnDefinition())
grid.ColumnDefinitions.Add(New ColumnDefinition())
grid.ColumnDefinitions.Add(New ColumnDefinition())
SpElementList.Children.Add(grid)
End If Dim checkBox = New CheckBox()
checkBox.HorizontalAlignment = HorizontalAlignment.Left
checkBox.Style = Resources.Item("CheckBoxStyle")
checkBox.DataContext = Datas.Item(index)
grid.SetColumn(checkBox, value)
grid.Children.Add(checkBox)
index +=
Next
End Sub End Class
Public Class CheckDataModel
Private _name As String = "AAAAA"
Public Property Name() As String
Get
Return _name
End Get
Set(value As String)
_name = value
End Set
End Property Public Property IsChecked As Boolean
End Class

WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局的更多相关文章

  1. WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...

  2. 【转】WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 本文主要内容: CheckBox复选框的自定义样式,有两种不同的风格实现: RadioB ...

  3. WPF CheckBox 滑块 样式 开关

    原文:WPF CheckBox 滑块 样式 开关 效果图 样式代码 <Style x:Key="CheckRadioFocusVisual"> <Setter P ...

  4. WPF 样式(定义样式、引用样式、样式作用域、Trigger触发器)

    1.定义 资源字典   <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presenta ...

  5. WPF自定义Window窗体样式

    资源文件代码: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation ...

  6. WPF下Itemscontrol分组 样式

    原文 WPF下Itemscontrol分组 样式 <ItemsControl Grid.Row="1" DataContext="{Binding Layouts} ...

  7. WPF教程十:如何使用Style和Behavior在WPF中规范视觉样式

    在使用WPF编写客户端代码时,我们会在VM下解耦业务逻辑,而剩下与功能无关的内容比如动画.视觉效果,布局切换等等在数量和复杂性上都超过了业务代码.而如何更好的简化这些编码,WPF设计人员使用了Styl ...

  8. WPF笔记(1.9 样式和控件模板)——Hello,WPF!

    原文:WPF笔记(1.9 样式和控件模板)--Hello,WPF! 资源的另一个用途是样式设置: <Window >  <Window.Resources>    <St ...

  9. WPF窗口模板——Style样式

    通用模板,窗口样式 <!-- 通用窗口模板 --> <ControlTemplate x:Key="CustomWindowTemplate" TargetTyp ...

随机推荐

  1. Apache thrift RPC 双向通信

    在上一篇介绍Apache thrift 安装和使用,写了一个简单的demo,讲解thrift服务的发布和客户端调用,但只是单向的客户端发送消息,服务端接收消息.而客户端却得不到服务器的响应. 在不涉及 ...

  2. ASP.NET OWIN OAuth:遇到的2个refresh token问题

    之前写过2篇关于refresh token的生成与持久化的博文:1)Web API与OAuth:既生access token,何生refresh token:2)ASP.NET OWIN OAuth: ...

  3. c#如何判断webbrowser已经加载完毕

    最近有个小程序需要采集网页源代码,但有的网页中JS脚本又会生成额外的代码,比如http://www.cnblogs.com/lidabo/p/4169396.html 红框部分便是另外加载的代码. 此 ...

  4. 使用UICollectionView实现首页的滚动效果

    实现类似这样的效果,可以滚动大概有两种实现方案 1. 使用scrollview来实现 2. 使用UICollectionView来实现 第一种比较简单,而且相对于性能来说不太好,于是我们使用第二种方案 ...

  5. [占位-未完成]scikit-learn一般实例之十一:异构数据源的特征联合

    [占位-未完成]scikit-learn一般实例之十一:异构数据源的特征联合 Datasets can often contain components of that require differe ...

  6. .net 一些开源的东东

    来自网络..版权归网络所有..Antlr ----- Website: http://www.antlr.org/ Copyright: Copyright (c) - Terence Parr Li ...

  7. Socket初识

    基础概念 Socket,套接字,本质是网络编程接口.提供网络通信的能力,实现不同虚拟机或不同计算机之间的通信.面向客户/服务(C/S)模型,socket是应用层和传输层之间的中间软件抽象层: 顶上三层 ...

  8. C#开发微信门户及应用(34)--微信裂变红包

    在上篇随笔<C#开发微信门户及应用(33)--微信现金红包的封装及使用>介绍了普通现金红包的封装和使用,这种红包只能单独一次发给一个人,用户获取了红包就完成了,如果我们让用户收到红包后,可 ...

  9. 供应链需求调研CheckList

    总体(General) 基本情况 1.    企业地址.邮编.电话.传真,项目联系人等基本资料. 2.    企业经营范围,产品线和主导产品. 3.    企业近几年的产值及销售额. 4.    企业 ...

  10. 跨平台日志清理工具 Log-Cutter v2.0.1 正式发布

    Log-Cutter 是JessMA开源组织开发的一个简单实用的日志切割清理工具.对于服务器的日常维护来说,日志清理是非常重要的事情,如果残留日志过多则严重浪费磁盘空间同时影响服务的性能.如果用手工方 ...