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自定义控件库和引用

相关推荐
EaseUI4 小时前
【Ease UI】2026-04-24 项目更新:增加多种风格登录页,增加菜单风格切换
ui
ZC跨境爬虫10 小时前
UI前端美化技能提升日志day7:(原生苹方字体全局适配+合规页脚完整像素级落地)
前端·javascript·ui·html·交互
Ulyanov13 小时前
《PySide6 GUI开发指南:QML核心与实践》 第十篇:综合实战——构建完整的跨平台个人管理应用
开发语言·python·qt·ui·交互·qml·雷达电子战系统仿真
Aotman_13 小时前
Element UI 表格搜索高亮
前端·javascript·vue.js·ui·elementui
久爱物联网14 小时前
【WinForm UI控件系列】散点图/折线图控件 (支持数值型、时间型、字符串型)
ui·winformui控件·c#控件ui·桌面应用ui控件·gdi绘制控件·散点图曲线图控件·时间型曲线图
RReality15 小时前
【Unity Shader URP】屏幕空间扭曲后处理(Screen Space Distortion)实战教程
ui·unity·游戏引擎·图形渲染·材质
Ulyanov15 小时前
《PySide6 GUI开发指南:QML核心与实践》 第八篇:性能优化大师——QML应用性能调优实战
python·qt·ui·性能优化·qml·系统仿真
报错小能手16 小时前
Swift UI 框架 实战 简易计数器、待办清单 、随机壁纸图库、个人笔记
ui·ios
ai_coder_ai16 小时前
自动化脚本ui编程之flexbox布局
ui·autojs·自动化脚本·冰狐智能辅助·easyclick
ZC跨境爬虫17 小时前
UI前端美化技能提升日志day6:(使用苹果字体+计算样式对比差异)
前端·javascript·css·ui·状态模式