AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

WPF Grid布局

2016-09-07 899
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本节讲述布局，顺带加点样式给大家看看~单纯学布局，肯定是枯燥的~哈哈 那如上界面，该如何设计呢？ 1、一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等。如上这种布局，在子元素数量未知的情况下，我们应该使用WrapPanel或者StackPanel来布局，子元素会自己换行。

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

那如上界面，该如何设计呢？

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>
View Code

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>
View Code

 

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 = 0;
            Grid grid = null;
            foreach (var data in Datas)
            {
                int value = index%3;
                if (value==0)
                {
                    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; }
    }
View Code

下面是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 = 0
        For i As Integer = 0 To 10
            Dim value = index Mod 3
            If value = 0 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 += 1
        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
View Code

 

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。
文章标签：
C#
前端开发
Java
PHP
Python
Ruby
iOS开发
关键词：
wpf布局
wpf grid
wpf grid布局
@winter
目录
相关文章
土木林森
|
C# UED 开发者
WPF与性能优化：掌握这些核心技巧，让你的应用从卡顿到丝滑，彻底告别延迟，实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法，详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈，如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着，通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画，从而有效提升应用性能。通过这些优化措施，WPF应用将更加流畅，用户体验也将得到显著改善。
土木林森
1232 1
关关长语
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
关关长语
470 1
土木林森
|
开发者 C# Windows
WPF布局大揭秘：掌握布局技巧，轻松创建响应式用户界面，让你的应用程序更上一层楼！
【8月更文挑战第31天】在现代软件开发中，响应式用户界面至关重要。WPF（Windows Presentation Foundation）作为.NET框架的一部分，提供了丰富的布局控件和机制，便于创建可自动调整的UI。本文介绍WPF布局的基础概念与实现方法，包括`StackPanel`、`DockPanel`、`Grid`等控件的使用，并通过示例代码展示如何构建响应式布局。了解这些技巧有助于开发者优化用户体验，适应不同设备和屏幕尺寸。
土木林森
485 0
老码识途
|
前端开发 C# 索引
浅谈WPF之UI布局
一个成功的软件，离不开人性化的UI设计，如何抓住用户第一视觉，让用户产生依赖感，合适优雅的布局必不可少。本文以一些简单的小例子，简述WPF中布局 面板 控件的使用，仅供学习分享使用，如有不足之处，还请指正。
老码识途
341 1
Rick_1/2
|
前端开发 C# 容器
WPF技术之控件布局
WPF提供了多种布局控件和技术，可以帮助开发人员轻松创建灵活的用户界面。
Rick_1/2
284 0
WPF技术之控件布局
关关长语
|
C#
WPF-布局样式练习-Day01
WPF-布局样式练习-Day01
关关长语
219 0
游客ywxcp53cgkqwi
|
C#
WPF学习—布局
WPF学习—布局
游客ywxcp53cgkqwi
180 0
WPF学习—布局
杰克.陈
|
C#
[WPF] VisualBrush 中的布局
原文:[WPF] VisualBrush 中的布局 今天插一篇随笔。说一说上周五遇到的一个布局问题，问题大概是这样的：需要在一个快区域上添加一张透明的背景图片，由于区域较大、并且宽高都不是固定大小，图片较小 所以图片需要居中显示。
杰克.陈
1037 1
杰克.陈
|
C# Windows
C#（WPF）为Grid添加实线边框。
原文:C#（WPF）为Grid添加实线边框。 相信大家在做WPF项目的时候，都会用到Grid这个布局控件，一般情况下，如果只是为了布局，那就不需要显示它的边框，但是也有特殊需求，如果把它当做表格来使用，那就需要为它添加实线边框。
杰克.陈
2521 1
杰克.陈
|
算法 C#
WPF/UWP 的 Grid 布局竟然有 Bug，还不止一个！了解 Grid 中那些未定义的布局规则
原文:WPF/UWP 的 Grid 布局竟然有 Bug，还不止一个！了解 Grid 中那些未定义的布局规则 版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
杰克.陈
1182 0