Question

我有一个复选框，其XAML标记如下：

<CheckBox HorizontalContentAlignment="Stretch">
    <StackPanel Orientation="Vertical">
        <TextBox x:Name="editTextBox" 
            Text="{Binding Path=Caption, Mode=TwoWay}"
            TextWrapping="Wrap"
            Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource booleanToVisibilityConverter}}" />
        <TextBlock x:Name="itemText"
            TextWrapping="Wrap"                        
            Text="{Binding Path=Caption}" 
            Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource reverseBooleanToVisibilityConverter}}">
        </TextBlock>
    </StackPanel>
</CheckBox>

我的想法是我可以在TextBlock（显示）和TextBox（编辑）之间切换。但是，在运行应用程序时，CheckBox visual（可检查方块）是垂直居中的。我希望它与TextBlock / TextBox的顶部对齐。

我注意到当我只包含一个TextBlock（所以没有StackPanel，没有TextBox）时，复选框实际上与TextBlock的顶部对齐，所以我假设我在StackPanel上缺少一些设置？

Answer 1

首先，不要在VerticalAlignment或VerticalContentAlignment（甚至ControlTemplate）上浪费时间。他们不会做你想做或想做的事。

如MSDN所述BulletDecorator（这是CheckBox和RadioButton用于呈现收音机/检查按钮的控件）将自动设置图标的位置。您无法对此进行额外控制：

当子项时，子弹始终与第一行文本对齐 object是一个文本对象。如果Child对象不是文本对象，则 Bullet对齐Child对象的中心。

除非您更改控制模板（不必要），否则只有在内容为文本时才能将收音机/支票图标置于顶部。

因此，如果您执行此类操作，则效果不佳，因为无论您尝试设置多少VerticalAlignment个属性，都无法移动图标。

<RadioButton>
    <StackPanel>
        <TextBlock Text="First line"/>
        <TextBlock Text="Something else"/>
    </StackPanel>
</RadioButton>

但幸运的是，您可以使用TextBlock在InlineUIContainer中放置您想要的任何内容。第一行中的文本（或内容）将自动指示图标的位置。如果您想要第一行下面不是文字的内容，请使用<Linebreak/>，然后使用<InlineUIContainer/>

这是一个超大TextBox的示例，可以更清楚地显示正在发生的事情。

<RadioButton>

    <TextBlock VerticalAlignment="Top" TextWrapping="Wrap">

        <TextBlock Text="Products with &lt;" VerticalAlignment="Center" Margin="0,0,5,0"/>

        <InlineUIContainer BaselineAlignment="Center">
            <TextBox FontSize="30" Width="25" Text="10" Margin="0,0,5,0"/>          
        </InlineUIContainer>

        <TextBlock VerticalAlignment="Center" Margin="0,0,5,0">
            <Run Text="days" FontWeight="Bold"/>
            <Run Text="inventory" />
        </TextBlock>

        <LineBreak/>    

        <InlineUIContainer>
            <StackPanel>
                <CheckBox Content="Include unsold products" />
                <CheckBox Content="Include something else" />
            </StackPanel>
        </InlineUIContainer>

    </TextBlock>
</RadioButton>

Answer 2

CheckBox.Content并不能让您对事物的显示方式有很大的控制权。试试这个：

 <DockPanel VerticalAlignment="Top"> <!-- can also be center or bottom -->
    <CheckBox/>
    <Grid>
        <TextBox x:Name="editTextBox" 
            Text="{Binding Path=Caption, Mode=TwoWay}"
            TextWrapping="Wrap"
            Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource booleanToVisibilityConverter}}" />
        <TextBlock x:Name="itemText"
            TextWrapping="Wrap"                        
            Text="{Binding Path=Caption}" 
            Visibility="{Binding Path=IsBeingEdited, Converter={StaticResource reverseBooleanToVisibilityConverter}}">
    </Grid>
</DockPanel>

WPF Checkbox内容与复选框的垂直对齐方式

2 个答案: