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

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 a BulletDecorator(CheckBox和RadioButton用于呈现无线电/检查按钮的控件)所述,将自动设置图标的位置.您无法对此进行额外控制:

当Child对象是文本对象时,Bullet总是与第一行文本对齐.如果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>