WPF--布局控件

cs 复制代码
<Window x:Class="SSC.Views.ExcelPipe"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SSC.Views"
        mc:Ignorable="d"
        Title="ExcelPipe" Height="450" Width="800">
    <Grid ShowGridLines="true">
        <Grid.RowDefinitions >
            <RowDefinition Height="30"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
            <Button Content="A" Click="LoadExcel_Click" Width="60" Height="30" BorderBrush="Blue"/>
            <Button Content="B" Click="ProcessData_Click" Width="60" Height="30"/>
            <Button Content="C" Click="ExportResults_Click" Width="60" Height="30"/>
        </StackPanel>

        <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal">
            <TextBlock Text="1"  Width="20" Height="20" Background="LightBlue" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <TextBlock Text="2"  Width="20" Height="20" Background="Orange" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <TextBlock Text="3"  Width="20" Height="20" Background="PaleGoldenrod" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <TextBlock Text="4"  Width="20" Height="20" Background="PaleGreen" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </StackPanel>

        <Grid Grid.Row="2" Grid.Column="0">
            <Grid.ColumnDefinitions >
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Orientation="Vertical">
                <TextBlock Text="A"  Width="50" Height="30" Background="LightBlue" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                <TextBlock Text="B"  Width="50" Height="30" Background="Orange" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                <TextBlock Text="C"  Width="50" Height="30" Background="PaleGoldenrod" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>

            </StackPanel>
        </Grid>

        <Grid Grid.Row="3">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                <Button Content="D" Click="LoadExcel_Click" Width="60" Height="30" BorderBrush="Blue"/>
                <Button Content="D" Click="LoadExcel_Click" Width="60" Height="30" BorderBrush="Blue"/>
                <Button Content="D" Click="LoadExcel_Click" Width="60" Height="30" BorderBrush="Blue"/>
                <Button Content="D" Click="LoadExcel_Click" Width="60" Height="30" BorderBrush="Blue"/>
                <Button Content="D" Click="LoadExcel_Click" Width="60" Height="30" BorderBrush="Blue"/>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

1.运用Grid,StackPanel

cs 复制代码
//资源文件
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button">
        <Setter Property="Background" Value="White"></Setter>
        <Setter Property="FontSize" Value="20"></Setter>
        <Setter Property="Margin" Value="5,10"></Setter>
    </Style>

    <Style x:Key="login" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="Green"></Setter>
    </Style>
    <Style x:Key="quit" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="Red"></Setter>
    </Style>
</ResourceDictionary>

//界面文件
<Window x:Class="SSC.Views.ExcelPipe"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SSC.Views"
        mc:Ignorable="d"
        Title="ExcelPipe" Height="450" Width="800">
    <Grid ShowGridLines="true">
        <StackPanel>
            <Button Style="{StaticResource login}" Content="登录"></Button>
            <Button Style="{StaticResource quit}" Content="退出"></Button>
            <Button Content="密码"></Button>
            <Button Content="忘记密码"></Button>
        </StackPanel>
    </Grid>
</Window>

//在app.xaml中全局引用资源文件
<Application x:Class="SSC.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:SSC"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Views/Button.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

运用style自定义控件库和引用

相关推荐
SuperEugene25 分钟前
Element Plus/VXE-Table UI 组件库规范:统一用法实战,避开样式冲突与维护混乱|工程化与协作规范篇
前端·javascript·vue.js·ui·前端框架·element plus·vxetable
新缸中之脑4 小时前
用Stitch和AI Studio改造应用UI
人工智能·ui
chimooing8 小时前
【AI 自动化测试新范式】基于 OpenClaw 的智能 UI 自动化全景解析与实战
人工智能·ui·自动化
武藤一雄8 小时前
WPF深度解析Behavior
windows·c#·.net·wpf·.netcore
程序员杰哥9 小时前
Web UI自动化测试之PO篇
自动化测试·软件测试·python·selenium·测试工具·ui·测试用例
大数据新鸟9 小时前
设计模式详解-状态模式
ui·设计模式·状态模式
Maybe_ch10 小时前
WPF的STA线程模型、APM与TAP:从线程约束到现代异步
c#·.net·wpf
FuckPatience10 小时前
WPF 实现windows文件压缩文件解压过程动画
wpf
xy345310 小时前
Axure 9.0 原生组件:让折线图实现动态交互(文本标签)
ui·交互·axure·原型·折线图
智算菩萨20 小时前
【Tkinter】4 Tkinter Entry 输入框控件深度解析:数据验证、密码输入与现代表单设计实战
python·ui·tkinter·数据验证·entry·输入框