C# WPF 布局

C#  

0、WPF 布局

1、ON/OFF按钮

2、textBox

3、ComboBox

4、TabControl

5、Button

<Window x:Class="WpfApp5.MainWindow"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:WpfApp5"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"WindowStyle="None" AllowsTransparency="True" Background="Transparent"  WindowStartupLocation="CenterScreen"><Window.Resources><Style x:Key="RoundedButtonStyle" TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border CornerRadius="10"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Background="{TemplateBinding Background}"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter></Style><!--通用按钮样式--><Style x:Key="WindowButtonStyle" TargetType="Button"><Setter Property="Background" Value="Transparent"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Foreground" Value="Black"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#E5E5E5"/></Trigger></Style.Triggers></Style><!--关闭按钮专用样式--><Style x:Key="CloseButtonStyle" TargetType="Button" BasedOn="{StaticResource WindowButtonStyle}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><BorderBorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Background="{TemplateBinding Background}"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter></Style><!-- 颜色块模板（用于菜单图标） --><Style x:Key="ColorMenuItemStyle" TargetType="MenuItem"><Setter Property="Width" Value="80"/><Setter Property="Height" Value="25"/><Setter Property="BorderThickness" Value="0"/></Style><!-- //OFF/ON 按钮 --><Style x:Key="CheckBoxSwitchStyle" TargetType="CheckBox"><Setter Property="IsChecked" Value="False"/><Setter Property="Cursor" Value="Hand"/><Setter Property="FontFamily" Value="/MESToolIntegration;component/Fonts/#iconfont"/><Setter Property="Background" Value="#FFFFFF"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="CheckBox"><Border Width="54" Name="CheckTrueBG" Height="22" BorderThickness="2" Background="#22B14C"  CornerRadius="10" BorderBrush="#188137" ><Grid><Border BorderThickness="1" Background="#FFFFFF" x:Name="border" Width="20" Height="20" CornerRadius="9" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0"  ><Border.RenderTransform><TranslateTransform  X="1"/></Border.RenderTransform></Border><TextBlock x:Name="txt" Text="{TemplateBinding Content}" FontFamily="iconfont"  FontSize="{TemplateBinding FontSize}" Margin="6.996,2.798,0,2.798" VerticalAlignment="Stretch" Foreground="#FFFFFF" HorizontalAlignment="Left" d:LayoutOverrides="Height" ><TextBlock.RenderTransform><TranslateTransform   X="17"></TranslateTransform></TextBlock.RenderTransform></TextBlock></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="true"><Setter Property="Background" TargetName="CheckTrueBG"  Value="#5FB878"/><Setter Property="Foreground" TargetName="txt"  Value="#FFFFFF"/><Setter Property="Background" TargetName="border"  Value="#FFFFFF"/><Setter Property="Text" TargetName="txt" Value="{Binding Tag,RelativeSource={RelativeSource TemplatedParent}}"/><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="32" Duration="00:00:0.2"/><DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/><DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="17" Duration="00:00:0.2"/></Storyboard></BeginStoryboard></Trigger.ExitActions></Trigger><Trigger Property="IsChecked" Value="False"><Setter Property="Text" TargetName="txt" Value="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!-- //=================================== --><!-- 自定义 CheckBox 样式 --><!-- 自定义 CheckBox 样式 --><Style x:Key="GreenCheckBoxStyle" TargetType="CheckBox"><!-- 默认前景色（勾选标记颜色） --><Setter Property="Foreground" Value="White" /><!-- 默认背景色（未选中时） --><Setter Property="Background" Value="#22B14C" /><!-- 边框颜色 --><Setter Property="BorderBrush" Value="#D0D0D0" /><!-- 模板定义 --><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="CheckBox"><Grid><!-- 背景和边框 --><Border x:Name="Border"BorderThickness="1"BorderBrush="{TemplateBinding BorderBrush}"Background="{TemplateBinding Background}"CornerRadius="3"><!-- 勾选标记（Path 绘制对勾） --><Path x:Name="CheckMark"Data="M 2,6 L 6,10 L 14,2" Stroke="{TemplateBinding Foreground}"StrokeThickness="2"Visibility="Collapsed" Margin="2"/></Border></Grid><!-- 触发器：控制选中状态外观 --><ControlTemplate.Triggers><!-- 选中时显示勾选标记，背景变绿色 --><Trigger Property="IsChecked" Value="True"><Setter TargetName="CheckMark" Property="Visibility" Value="Visible" /><Setter TargetName="Border" Property="Background" Value="#22B14C" /><Setter TargetName="Border" Property="BorderBrush" Value="DarkGreen" /></Trigger><!-- 鼠标悬停时轻微变色（可选） --><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="Border" Property="Background" Value="#E0F0E0" /></Trigger><!-- 禁用状态样式（可选） --><Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="#AAAAAA" /><Setter TargetName="Border" Property="Background" Value="#F5F5F5" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!-- 自定义 TextBox 样式 --><Style x:Key="CustomTextBoxStyle" TargetType="TextBox"><!-- 设置背景色为绿色 --><Setter Property="Background" Value="#22B14C"/><!-- 设置字体颜色为白色 --><Setter Property="Foreground" Value="White"/><!-- 设置边框厚度 --><Setter Property="BorderThickness" Value="1"/><!-- 设置边框颜色 --><Setter Property="BorderBrush" Value="DarkGreen"/><!-- 设置圆角 --><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TextBox"><Border x:Name="border"BorderThickness="{TemplateBinding BorderThickness}"BorderBrush="{TemplateBinding BorderBrush}"Background="{TemplateBinding Background}"CornerRadius="10"><ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/></Border><ControlTemplate.Triggers><!-- 当获得焦点时的样式 --><Trigger Property="IsFocused" Value="True"><Setter TargetName="border" Property="BorderBrush" Value="LightGreen"/></Trigger><!-- 当禁用时的样式 --><Trigger Property="IsEnabled" Value="False"><Setter Property="Background" Value="#CCCCCC"/><Setter Property="Foreground" Value="#666666"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!-- 定义下拉箭头的几何形状 --><PathGeometry x:Key="DownArrowGeometry">M 0 0 L 3.5 4 L 7 0 Z</PathGeometry><!-- 自定义 ComboBox 下拉箭头按钮的 ControlTemplate --><ControlTemplate x:Key="ComboBoxToggleButtonTemplate" TargetType="ToggleButton"><Borderx:Name="Border"Background="Transparent"BorderBrush="Transparent"BorderThickness="0"CornerRadius="0 5 5 0" Margin="3,0,3,0"><PathWidth="7" VerticalAlignment="Top" x:Name="Arrow" Height="4" HorizontalAlignment="Left" Fill="White" Data="{StaticResource DownArrowGeometry}" Margin="113,9,0,0"/></Border><!-- 触发器 --><ControlTemplate.Triggers><!-- 鼠标悬停时的样式 --><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="Border" Property="Background" Value="Transparent"/></Trigger><!-- 按下时的样式 --><Trigger Property="IsPressed" Value="True"><Setter TargetName="Border" Property="Background" Value="Transparent"/></Trigger><!-- 下拉列表打开时的样式 --><Trigger Property="IsChecked" Value="True"><Setter TargetName="Border" Property="Background" Value="Transparent"/></Trigger><!-- 禁用时的样式 --><Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="#AAAAAA"/></Trigger></ControlTemplate.Triggers></ControlTemplate><!-- 自定义 ComboBox 样式 --><Style x:Key="CustomComboBoxStyle" TargetType="ComboBox"><!-- 设置基本属性 --><Setter Property="Foreground" Value="#FFFFFF"/><Setter Property="Background" Value="#22B14C"/><Setter Property="BorderBrush" Value="DarkGreen"/><Setter Property="BorderThickness" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ComboBox"><Grid><!-- 边框 --><Borderx:Name="Border"BorderThickness="{TemplateBinding BorderThickness}"BorderBrush="{TemplateBinding BorderBrush}"Background="{TemplateBinding Background}"CornerRadius="5"><Grid><!-- 显示选中项的区域 --><ContentPresenterx:Name="ContentSite"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"Margin="{TemplateBinding Padding}"Content="{TemplateBinding SelectionBoxItem}"ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/><!-- 下拉箭头按钮 --><ToggleButtonx:Name="ToggleButton"Template="{StaticResource ComboBoxToggleButtonTemplate}"IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"Focusable="false"/></Grid></Border><!-- 下拉列表 --><Popupx:Name="Popup"IsOpen="{TemplateBinding IsDropDownOpen}"Placement="Bottom"AllowsTransparency="true"Focusable="false"PopupAnimation="Slide"><Borderx:Name="DropDownBorder"BorderThickness="1"BorderBrush="Transparent"Background="#22B14C"CornerRadius="5"Width="{Binding ActualWidth, ElementName=Border}"><!-- 绑定下拉列表宽度到 ComboBox 边框宽度 --><ScrollViewerx:Name="DropDownScrollViewer"><Gridx:Name="Grid"RenderOptions.ClearTypeHint="Enabled"><Canvasx:Name="Canvas"HorizontalAlignment="Left"Height="0"VerticalAlignment="Top"Width="0"><Rectanglex:Name="OpaqueRect"Fill="{Binding Background, ElementName=DropDownBorder}"Height="{Binding ActualHeight, ElementName=DropDownBorder}"Width="{Binding ActualWidth, ElementName=DropDownBorder}"/></Canvas><ItemsPresenterx:Name="ItemsPresenter"KeyboardNavigation.DirectionalNavigation="Contained"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/></Grid></ScrollViewer></Border></Popup></Grid><!-- 触发器 --><ControlTemplate.Triggers><!-- 鼠标悬停时的样式 --><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="Border" Property="BorderBrush" Value="LightGreen"/></Trigger><!-- 获得焦点时的样式 --><Trigger Property="IsKeyboardFocusWithin" Value="True"><Setter TargetName="Border" Property="BorderBrush" Value="LightGreen"/></Trigger><!-- 禁用时的样式 --><Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="#AAAAAA"/><Setter TargetName="Border" Property="Background" Value="#CCCCCC"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><!-- 自定义标题栏 --><Grid.RowDefinitions><RowDefinition Height="30"/><RowDefinition Height="*"/></Grid.RowDefinitions><Border Grid.Row="0" Background="#EEEEF2" CornerRadius="5 5 0 0"MouseLeftButtonDown="TitleBar_MouseLeftButtonDown" ><Grid><Grid.ColumnDefinitions><!-- 为图标预留的列，宽度自动调整 --><ColumnDefinition Width="Auto"/><!-- 为 Label 预留的列，宽度自动调整 --><ColumnDefinition Width="Auto"/><!-- 剩余空间的列 --><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><!-- 添加图标 Image 控件 --><!-- 添加图标 Image 控件 --><Image Grid.Column="0" Source="/icons8-app-store-480.png" Margin="5,0,5,0" VerticalAlignment="Center" Height="20" MouseLeftButtonDown="Image_MouseLeftButtonDown"/><!-- Label --><Label Content="标题2000" VerticalAlignment="Center"  Foreground="black" FontWeight="Bold"  Grid.Column="1" Margin="5,0,5,0"/><!-- 设置按钮 --><Button Content="⚙" Margin="5,5,5,5" Grid.Column="2"  Width="20" HorizontalAlignment="Right"  BorderThickness="0" Background="Transparent" Click="Button_Click_1" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave" Style="{StaticResource CloseButtonStyle}"><Button.ToolTip><ToolTip Content="设置" /></Button.ToolTip></Button><!-- 皮肤按钮 --><!-- 主题按钮（带下拉菜单） --><Button Content="🎨" Grid.Column="3" Style="{StaticResource CloseButtonStyle}"Margin="5,5,5,5" Width="20"><Button.ToolTip><ToolTip Content="主题"/></Button.ToolTip><Button.ContextMenu><ContextMenu x:Name="ThemeMenu" PlacementTarget="{Binding PlacementTarget, RelativeSource={RelativeSource Self}}"><MenuItem Header="绿色" Click="ColorMenuItem_Click"Style="{StaticResource ColorMenuItemStyle}"><MenuItem.Background><SolidColorBrush Color="#FF4CAF50"/></MenuItem.Background></MenuItem><MenuItem Header="红色" Click="ColorMenuItem_Click"Style="{StaticResource ColorMenuItemStyle}"><MenuItem.Background><SolidColorBrush Color="#FFF44336"/></MenuItem.Background></MenuItem><MenuItem Header="蓝色" Click="ColorMenuItem_Click"Style="{StaticResource ColorMenuItemStyle}"><MenuItem.Background><SolidColorBrush Color="#FF2196F3"/></MenuItem.Background></MenuItem><MenuItem Header="黄色" Click="ColorMenuItem_Click"Style="{StaticResource ColorMenuItemStyle}"><MenuItem.Background><SolidColorBrush Color="#FFFFEB3B"/></MenuItem.Background></MenuItem><MenuItem Header="灰色" Click="ColorMenuItem_Click"Style="{StaticResource ColorMenuItemStyle}"><MenuItem.Background><SolidColorBrush Color="#FF9E9E9E"/></MenuItem.Background></MenuItem><MenuItem Header="暗色" Click="ColorMenuItem_Click"Style="{StaticResource ColorMenuItemStyle}"><MenuItem.Background><SolidColorBrush Color="#FF212121"/></MenuItem.Background></MenuItem><MenuItem Header="亮色" Click="ColorMenuItem_Click"Style="{StaticResource ColorMenuItemStyle}"><MenuItem.Background><SolidColorBrush Color="#FFFFFFFF"/></MenuItem.Background></MenuItem></ContextMenu></Button.ContextMenu></Button><!-- 最小化按钮 --><Button Content="-" Margin="5,5,0,5" Grid.Column="4" Width="20" Foreground="black" BorderThickness="0" Background="Transparent" Click="MinimizeButton_Click" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave" Style="{StaticResource CloseButtonStyle}"><Button.ToolTip><ToolTip Content="最小化" /></Button.ToolTip></Button><!-- 最大化按钮 --><Button Content="□" Margin="0,5,0,5" Grid.Column="5" Width="20" Foreground="black" BorderThickness="0" Background="Transparent" Click="MaximizeButton_Click" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave" Style="{StaticResource CloseButtonStyle}"><Button.ToolTip><ToolTip Content="最大化" /></Button.ToolTip></Button><!-- 关闭按钮 --><Button Content="✕" Margin="0,5,0,5" Grid.Column="6" Width="20" Foreground="black" BorderThickness="0" Background="Transparent" Click="CloseButton_Click"  MouseEnter="CloseButton_MouseEnter" MouseLeave="Button_MouseLeave"  Style="{StaticResource CloseButtonStyle}"><Button.ToolTip><ToolTip Content="关闭" /></Button.ToolTip></Button></Grid></Border><!-- 主内容区域 --><Grid Grid.Row="1" x:Name="MainContentGrid" Background="White"><Grid.ColumnDefinitions><ColumnDefinition Width="200"/><ColumnDefinition Width="400"/></Grid.ColumnDefinitions><StackPanel Grid.Column="0" Background="LightGray"><Button Content="主页" Margin="5" Padding="10"MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave"Click="Button_Click"Style="{StaticResource RoundedButtonStyle}"Height="30"Width="180"BorderThickness="1"BorderBrush="Gray"/><Button Content="设置" Margin="5" Padding="10"MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave"Click="Button_Click"Style="{StaticResource RoundedButtonStyle}"Height="30" Width="180"BorderThickness="1"BorderBrush="Gray"/><Button Content="联系" Margin="5" Padding="10"MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave"Click="Button_Click"Style="{StaticResource RoundedButtonStyle}"Height="30" Width="180"BorderThickness="1"BorderBrush="Gray"><Button.Background><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.3"><GradientStop Color="#FF55CC19" Offset="1"/><GradientStop Color="White" Offset="0"/></LinearGradientBrush></Button.Background></Button><Button Content="备注" Margin="5" Padding="10"MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave"Click="Button_Click"Style="{StaticResource RoundedButtonStyle}"Height="30" Width="180"BorderThickness="1"BorderBrush="Gray"/><CheckBox BorderThickness="1,1,0,1" Style="{DynamicResource CheckBoxSwitchStyle}"  Content="OFF" Tag="NO" /><CheckBox Content="启用功能" Style="{StaticResource GreenCheckBoxStyle}" Margin="10" Height="20" Width="22" /><TextBox Style="{StaticResource CustomTextBoxStyle}" Text="自定义样式TextBox" Margin="10" Height="30" Width="180" FontSize="20"/><ComboBoxStyle="{StaticResource CustomComboBoxStyle}"Margin="10" Width="128"><ComboBoxItem>选项 1000000</ComboBoxItem><ComboBoxItem>选项 2000000</ComboBoxItem><ComboBoxItem>选项 3000000</ComboBoxItem></ComboBox></StackPanel><Frame x:Name="ContentArea" Grid.Column="1" NavigationUIVisibility="Hidden" Margin="0,0,-200,0"/></Grid></Grid>
</Window><Page x:Class="WpfApp5.Page2"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:WpfApp5"mc:Ignorable="d"Title="Page2" Height="450" Width="800"><Page.Resources><Style TargetType="TabControl"><Setter Property="BorderThickness" Value="0"/><!-- 去掉 TabControl 的边框 --><Setter Property="Padding" Value="0"/></Style><!-- 自定义 TabItem 样式 --><Style TargetType="TabItem"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TabItem"><Grid><Border x:Name="Border"BorderBrush="Transparent"BorderThickness="0,0,0,1" Background="{TemplateBinding Background}"Padding="{TemplateBinding Padding}"><ContentPresenter x:Name="ContentSite"VerticalAlignment="Center"HorizontalAlignment="Center"ContentSource="Header"Margin="12,2,12,2"/></Border></Grid><ControlTemplate.Triggers><Trigger Property="IsSelected" Value="True"><Setter TargetName="Border" Property="BorderBrush" Value="#C3C3C3"/><!-- 选中时横线颜色 --></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Page.Resources><Grid><TabControl x:Name="MyTabControl"><TabItem Header="View1" BorderThickness="0" Background="Transparent" Width="200"><local:Window1 /></TabItem><TabItem Header="View2" BorderThickness="0" Background="Transparent" Width="200"><TabItem.DataContext><local:Page3/></TabItem.DataContext><local:Win2/></TabItem><TabItem Header="View3" BorderThickness="0" Background="Transparent" Width="200"><TabItem.DataContext><local:Page3/></TabItem.DataContext></TabItem></TabControl></Grid>
</Page>