如何在弹出窗口中水平对齐复选框? [英] How to horizontally align a CheckBox inside a popup?

问题描述

问题:以下 XAML 未将 CheckBox 热区对齐到中心.将 Horizo​​ntalAlignment="Center" 设置为 StackPanel 的属性也没有任何区别.我们如何将其居中对齐?

注意:如果有人想要，我已经在

更新我删除了 TextBlock 并将 Content="Set default" 属性添加到 CheckBox.但它仍然向左对齐.我希望它如下所示对齐:

解决方案

您使用

现在，该问题的解决方案是使用不同的转换，

---

底部使用LayoutTransform的黑线似乎是渲染神器.

通过将 UseLayoutRounding 设置为 true 来启用布局舍入可解决此问题.

有一些关于此类问题的相关帖子，SnapsToDevicePixels 对我不起作用.

Question: The following XAML is not hotizontally aligning the CheckBox to center. Setting HorizontalAlignment="Center" as StackPanel's attribute did not make any difference, either. How can we align it to center?

NOTE: I have uploaded a simple test app sample here if anyone wants to test it. This link will expire in 30 days from today July 21, 2021.

<StackPanel>
   <Button x:Name="btnTest" Content="Test" Click="btnTest_Click"/>
   <Popup Name="MyPopup" Placement="Mouse">
     <StackPanel Background="Bisque">
       <Button Click="Hide_Click" Margin="10">Hide Popup</Button>
       <CheckBox x:Name="chkWebSpeechDefault" HorizontalAlignment="Center">
           <CheckBox.RenderTransform>
              <ScaleTransform ScaleX=".5" ScaleY=".5"/>
          </CheckBox.RenderTransform>
          <TextBlock Text="Set default" FontSize="20"/>
       </CheckBox>
     </StackPanel>
   </Popup>
</StackPanel>

Code Behind [Not specifically relevant to the question]:

private void btnTest_Click(object sender, RoutedEventArgs e)
{
    MyPopup.IsOpen = true;
}

Display of the above XAML:

As you can noticed the checkbox is not horizontally aligned to center.

UPDATE I removed the TextBlock and added Content="Set default" attribute to CheckBox. But it still is aligned to the left. I would like it to be aligned as shown below:

解决方案

You use a RenderTransform in the Popup for the CheckBox to scale it to half its size.

<CheckBox x:Name="chkWebSpeechDefault" Content="Set default" HorizontalAlignment="Center">
    <CheckBox.RenderTransform>
        <ScaleTransform ScaleX=".5" ScaleY=".5"/>
    </CheckBox.RenderTransform>
</CheckBox>

Render transformations are applied before rendering, but after the layout phase (Measure and Arrange). This means that the originally scaled CheckBox (which spans almost the full width of the popup) will in fact be aligned horizontally, but it is barely visible. After that, the CheckBox will be transformed (only for rendering), but its position and size in the layout is still the same as the original, only the scaled rendered image is put in this imaginary bounding box at the top left. That is why it appears not to be centered. You can experiment with this by assigning a large width, e.g. 500, to the Popup, then you will see the centering.

Now, the solution to the issue is to use a different transformation, a LayoutTransform.

<CheckBox.LayoutTransform>
    <ScaleTransform ScaleX=".5" ScaleY=".5"/>
</CheckBox.LayoutTransform>

This transformation is applied before the Measure and Arrange steps, so the layout calculation will consider the real size after scaling and the horizontal alignment is applied to the scaled control.

---

The black line at the bottom using LayoutTransform seems to be a rendering artifact.

<CheckBox x:Name="chkWebSpeechDefault" Content="Set default" HorizontalAlignment="Center" UseLayoutRounding="True">

Enabling layout rounding by setting UseLayoutRounding to true solves the issue.

There are a few related posts on these kind of issues, SnapsToDevicePixels does not work for me.

这篇关于如何在弹出窗口中水平对齐复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！