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

相关推荐
zzu123zsw5 小时前
当 GPU 加速渲染遇上无头组件:拆解 Yororen UI 在 GPUI 生态下的状态解耦与 XML 模板实践
xml·ui·rust·gui·gpui
_Doubletful1 天前
从零开始学 UI 第一篇:Figma 快速上手实战指南(上)
ui·figma
mmsx1 天前
Android 三类「看着无关」的故障:大事务、UI 阻塞与 ViewModel 作用域
android·ui
民乐团扒谱机1 天前
【超详细】从“硬编码”到“主题化宏”:大型桌面端UI重构与模块解耦实战避坑指南
ui·重构
电子云与长程纠缠2 天前
UE5魂系游戏开发教程05
开发语言·学习·游戏·ui·ue5
光泽雨2 天前
动画生命周期
c#·wpf
特立独行的猫a2 天前
AI时代的应用开发神器:cj-tauri 已支持鸿蒙 PC,第一次的踩坑记录
ui·harmonyos·tauri·仓颉·鸿蒙pc·cj-tauri
nap1173 天前
WPF 中常用的 LINQ 语句
wpf
Caroline5163 天前
GPT Image 2.5 + DeepSeek V4.1 Flash-1017:从游戏 UI 设计到 3D 项目生成
gpt·游戏·ui·ai 编程·gpt image 2.5