Question

对于记分牌应用程序，我正在构建客户端想要特定的查找团队名称和分数：

由于我需要在UI中的不同位置使用它们，我想我将它们包装为UserControl。这是上面显示的图像的XAML（已经从实际中显着简化）：

<UserControl x:Class="Scoreboard.TeamNameAndScoreControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Scoreboard"
             mc:Ignorable="d"
             d:DesignHeight="30" d:DesignWidth="100">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="5*"/>
      <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <Label
      Name="TeamName"
      BorderBrush="AliceBlue"
      BorderThickness="1"
        Content="WEST"
      FontSize="20"
      Padding="0"
      Background="Gray"
      FontWeight="Bold"
      HorizontalContentAlignment="Center"
      />
    <Label
      Name="Score"
      BorderBrush="AliceBlue"
      BorderThickness="1"
        Content="2"
            Grid.Column="1"
      Padding="0"
      Background="White"
      FontSize="20"
      FontWeight="Bold"
      HorizontalContentAlignment="Center"
      />
  </Grid>
</UserControl>

对于这个问题，重要的是要注意，TeamName和Score标签的5-2比例大小是至关重要的。

由于我想要使用此控件的应用程序UI中的一些不同位置的大小不同，并且由于我希望控件按比例响应窗口大小更改，我想我将Grid包装在Viewbox中：

<UserControl x:Class="Scoreboard.TeamNameAndScoreControl"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 xmlns:local="clr-namespace:Scoreboard"
                 mc:Ignorable="d"
                 d:DesignHeight="30" d:DesignWidth="100">
  <Viewbox>
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="2*"/>
      </Grid.ColumnDefinitions>
      <Label
          BorderBrush="AliceBlue"
          BorderThickness="1"
            Content="WEST"
          FontSize="20"
          Padding="0"
          Background="Gray"
          FontWeight="Bold"
          HorizontalContentAlignment="Center"
          />
      <Label
          BorderBrush="AliceBlue"
          BorderThickness="1"
            Content="2"
                Grid.Column="1"
          Padding="0"
          Background="White"
          FontSize="20"
          FontWeight="Bold"
          HorizontalContentAlignment="Center"
          />
    </Grid>
  </Viewbox>
</UserControl>

问题是当被Viewbox包装时，Grid似乎将ColumnDefinition.Width值有效地转换为“Auto”，因此结果如下所示：

我已经尝试了Viewbox.Stretch和Viewbox.StretchDirection属性的所有可能组合，当然这些属性会显着改变外观，但不会“修复”网格列宽的问题。

更改标签的HorizontalContentAlignment似乎没有效果。

我尝试过设置SharedSizeGroup属性但没有设置欢乐：

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="5*" SharedSizeGroup="A"/>
  <ColumnDefinition Width="2*" SharedSizeGroup="A"/>
</Grid.ColumnDefinitions>

我尝试重组而不是将每个Label包装在Viewbox中，但是Viewbox不会填充Grid单元格，使它看起来很奇怪：

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="5*"/>
    <ColumnDefinition Width="2*"/>
  </Grid.ColumnDefinitions>
  <Viewbox>
    <Label
            BorderBrush="AliceBlue"
            BorderThickness="1"
            Content="WEST"
            FontSize="20"
            Padding="0"
            Background="Gray"
            FontWeight="Bold"
            HorizontalContentAlignment="Center"
            />
  </Viewbox>
  <Viewbox Grid.Column="1">
    <Label
            BorderBrush="AliceBlue"
            BorderThickness="1"
            Content="2"
            Padding="0"
            Background="White"
            FontSize="20"
            FontWeight="Bold"
            HorizontalContentAlignment="Center"
            />
  </Viewbox>
</Grid>

请再次注意，此处显示的图像和XAML已针对此问题进行了大量简化，实际上包含了一组广泛的样式，以增强每个标签的边框，背景和字体的外观。关键是，遗憾的是，修复不会像设置Grid的背景那样简单（或类似的东西）。

那么，有关为什么我的ColumnDefinition.Width值似乎被更改为Auto以及如何修复它的任何想法？

Answer 1

我基本上已经明白了。

我需要手动设置网格的宽度/高度，这会强制Viewbox（从其子节点获取其大小）的大小相同：

<UserControl x:Class="Scoreboard.TeamNameAndScoreControl"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 xmlns:local="clr-namespace:Scoreboard"
                 mc:Ignorable="d"
                 d:DesignHeight="30" d:DesignWidth="100">
  <Viewbox>
    <Grid Width="100" Height="30">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="2*"/>
      </Grid.ColumnDefinitions>
      <Label
          BorderBrush="AliceBlue"
          BorderThickness="1"
          Content="WEST"
          FontSize="20"
          Padding="0"
          Background="Gray"
          FontWeight="Bold"
          HorizontalContentAlignment="Center"
          />
      <Label
          BorderBrush="AliceBlue"
          BorderThickness="1"
          Content="2"
          Grid.Column="1"
          Padding="0"
          Background="White"
          FontSize="20"
          FontWeight="Bold"
          HorizontalContentAlignment="Center"
          />
    </Grid>
  </Viewbox>
</UserControl>

现在Grid正在遵循我指定的5 * / 2 *列宽。

现在很清楚（对我来说）在我做出这个改变之前，网格真的不知道自己有多大（因为当我添加Viewbox时，网格从拥有一个指定其大小的父级 - UserControl - 到父母从其子女获得其大小）。显然，在这种情况下，它只是决定让每个细胞包裹（从它的大小）到它的孩子（即“自动”大小）。

ColumnDefinition.Viewbox中Grid的宽度是否设置为Auto？

1 个答案: