Căn dọc nội dung WPF Checkbox liên quan đến hộp kiểm

Question

Tôi có một hộp kiểm mà XAML markup là như sau:

<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> 

Ý tưởng là tôi có thể chuyển đổi giữa các TextBlock (hiển thị) và TextBox (chỉnh sửa). Tuy nhiên, khi chạy ứng dụng, hình ảnh CheckBox (hình vuông có thể kiểm tra) được căn giữa theo chiều dọc. Tôi muốn nó được liên kết với đầu của TextBlock/TextBox thay thế.

Tôi nhận thấy rằng khi tôi chỉ bao gồm TextBlock (vì vậy không có StackPanel, không có Hộp văn bản), hộp kiểm thực tế được căn chỉnh với phần trên cùng của TextBlock, vì vậy tôi giả sử tôi thiếu một số cài đặt trên StackPanel?

Answer 1

CheckBox.Content không cung cấp cho bạn nhiều quyền kiểm soát đối với cách hiển thị mọi thứ. Hãy thử điều này thay vì:

<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> 

Answer 2

Trước hết đừng lãng phí thời gian của bạn với VerticalAlignment hoặc VerticalContentAlignment (hoặc thậm chí ControlTemplate). Họ sẽ không làm những gì bạn muốn hoặc có thể mong đợi.

Như được mô tả trên MSDN a BulletDecorator (là điều khiển mà CheckBox và RadioButton sử dụng để hiển thị nút radio/kiểm tra) sẽ tự động đặt vị trí của biểu tượng. Bạn không có quyền kiểm soát bổ sung đối với điều này:

Dấu đầu dòng luôn khớp với dòng đầu tiên của văn bản khi đối tượng con là đối tượng văn bản. Nếu đối tượng Child không phải là đối tượng văn bản, thì Bullet sẽ căn giữa với đối tượng con.

Trừ khi bạn thay đổi mẫu điều khiển (không cần thiết), bạn sẽ chỉ có thể định vị biểu tượng radio/kiểm tra ở trên cùng nếu nội dung là văn bản.

Vì vậy, nếu bạn làm một cái gì đó như thế này nó sẽ không tốt vì bạn sẽ không thể di chuyển biểu tượng cho dù có bao nhiêu thuộc tính VerticalAlignment bạn cố đặt.

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

NHƯNG may mắn thay bạn có thể đặt khá nhiều bất cứ điều gì bạn muốn trong một TextBlock sử dụng InlineUIContainer. Văn bản (hoặc nội dung) trong dòng đầu tiên sẽ tự động định vị vị trí của biểu tượng. Nếu bạn muốn một cái gì đó bên dưới dòng đầu tiên không phải là văn bản, chỉ cần sử dụng <Linebreak/> và sau đó <InlineUIContainer/>

Đây là một ví dụ có quá khổ TextBox để hiển thị rõ hơn những gì đang xảy ra.

<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>