XAML

Question

我不得不将 HTA 移至 Powershell/WPF，现在，无论好坏，我都需要保持 UI 不变。所以...请留下任何关于美学、页面元素使用等的评论。我们将在 v2 中处理这些问题！

使用 Visual Studio CE 2022 v17.0.5，在设计时，我在 TabGroup 的左右两端获得了我想要的 20 像素边距。然而，在运行时，右端的边距已经消失。

我错过了什么？

这是XAML：

<Window x:Class="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"
    mc:Ignorable="d"
    Title="Application Deployment" Icon="/DeployApplication.ico" Height="780" Width="800">
    <Canvas Height="780" Width="800">
            <Grid Name="grdTop">
                    <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="200"/>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="200"/>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="200"/>
                            <ColumnDefinition Width="120"/>
                            <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                            <RowDefinition Height="5"/>
                            <RowDefinition Height="20"/>
                            <RowDefinition Height="5"/>
                            <RowDefinition Height="20"/>
                            <RowDefinition Height="5"/>
                            <RowDefinition Height="20"/>
                            <RowDefinition Height="5"/>
                    </Grid.RowDefinitions>
                    <CheckBox Name="chkWriteLog" Height="18" Width="158" Grid.Column="1" Grid.Row="1" Content="_Write to a log file" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <CheckBox Name="chkSendLog" Height="18" Width="158" Grid.Column="1" Grid.Row="3" Content="_Send log via email" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <CheckBox Name="chkUseEventLog" Height="18" Width="158" Grid.Column="1" Grid.Row="5" Content="Use E_vent log" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <Label Name="lblEmailAddress" Height="23" Width="200" Grid.Column="3" Grid.Row="1" Content="Select an _email address:" HorizontalContentAlignment="Right"/>
                    <Label Name="lblCustomEmailAddresses" Height="23" Width="200" Grid.Column="3" Grid.Row="3" Content="Custom _addresses:" HorizontalContentAlignment="Right"/>
                    <ListBox Name="lisEmailAddress" Height="23" Width="320" Grid.Column="5" Grid.Row="1" d:ItemsSource="{d:SampleData ItemCount=5}"/>
                    <TextBox Name="txtCustomEmailAddress" Height="23" Width="320" Grid.Column="5" Grid.Row="3" TextWrapping="Wrap" VerticalAlignment="Top"/>
            </Grid>
            <Grid Name="grdSeparator1" Canvas.Top="75">
                    <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="800"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                            <RowDefinition Height="5"/>
                            <RowDefinition Height="5"/>
                    </Grid.RowDefinitions>
                    <Rectangle Grid.Column="0" Grid.Row="1" Margin="20,0,20,0" Width="780" Fill="Black" Height="3"/>
            </Grid>
            <Grid Name="grdTabContainer" Canvas.Top="95">
                    <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="800"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                            <RowDefinition Height="605"/>
                            <RowDefinition Height="5"/>
                    </Grid.RowDefinitions>
                    <TabControl x:Name="tabMain" Height="600" Width="760" Grid.Column="0" Grid.Row="0" Margin="20,0,20,0" HorizontalAlignment="Left" VerticalAlignment="Top">
                            <TabItem Header="Application">
                            </TabItem>
                            <TabItem Header="Deployment type">
                            </TabItem>
                            <TabItem Header="Distribution">
                            </TabItem>
                    </TabControl>
            </Grid>
      </Canvas>
</Window>

设计时间
运行时间

Answer 1

根据 OS 及其样式，window 在运行时将具有不同大小的边框，而在设计时则没有这样的边框。

你可以用这个 window 内容证明这一点：

<Window
  ...
  Width="800"
  Height="450"
  mc:Ignorable="d">
  <Grid>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
      <Run Text="Width: " /><Run Text="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}" />
      <Run Text="Height: " /><Run Text="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}" />
    </TextBlock>
  </Grid>
</Window>

设计时间：Width: 800 Height: 434.04
运行时间：Width: 784 Height: 411

如果您想解决这个问题（不影响您的布局样式），请将您的 XAML 更改为

<Window x:Class="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"
    mc:Ignorable="d"
    Title="Application Deployment" 
    Icon="/DeployApplication.ico"

    SizeToContent="WidthAndHeight"> <!-- automatic resize of the window -->
    
  <!-- set the size here --> 
  <Grid Width="800" Height="780">

    <!-- your canvas goes here -->

  </Grid>
</Window>

XAML - 设计视图不同于运行视图

XAML - Design view different to running view

wpf

XAML - 设计视图不同于 运行 视图

XAML - Design view different to running view

wpf

xaml

XAML - 设计视图不同于运行视图