Làm cách nào để tạo đầu trang Bullet của RadioButton?

Question

Tôi có nút radio đa tuyến và tôi muốn dấu đầu dòng ở bên trái nội dung (mặc định) được căn chỉnh ở đầu điều khiển nút radio. Cách dễ nhất để làm điều này trong XAML là gì?

Answer 1

Note: Hãy chắc chắn để kiểm tra Rachel's answer - cô mất một giai đoạn này thêm vào một lớp tổng quát

---

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> 

Answer 2

Ghi đè Control.Template cho RadioButton. Dưới đây là ví dụ từ MSDN Radio Button Control Template Example

Nếu bạn không muốn ghi đè Control.Template cho nút radio, bạn có thể đặt nội dung thành một TextBlock được bao bọc. xem mẫu này

<RadioButton Name="radioButton1"> 
    <TextBlock TextWrapping="Wrap">Here is some multiline text that does some wrapping</TextBlock> 
</RadioButton> 

Answer 3

tôi đã xây dựng một mẫu tương đối chung chung dựa trên Simon Weaver's answer có thể được sử dụng trong hầu hết các tình huống mà không cần phải nhớ để tùy chỉnh RadioButton.Content tất cả các thời gian của bạn.

<ControlTemplate x:Key="MultiLineRadioButtonTemplate" TargetType="{x:Type RadioButton}"> 
    <RadioButton IsChecked="{TemplateBinding IsChecked}"> 
     <TextBlock> 
      <LineBreak /> 
      <InlineUIContainer> 
       <ContentPresenter Margin="0,-21,0,8" 
            Content="{TemplateBinding ContentPresenter.Content}" 
            ContentTemplate="{TemplateBinding ContentPresenter.ContentTemplate}"/> 
      </InlineUIContainer> 
     </TextBlock> 
    </RadioButton> 
</ControlTemplate> 

Để giải thích cách thức các mẫu hoạt động:

• Các TextBlock là có vì theo mặc định, đạn RadioButton thẳng hàng với dòng đầu tiên của văn bản nếu nội dung là một đối tượng văn bản (một Label sẽ không làm việc)

• các LineBreak là để bọc các nội dung vào một dòng mới, do đó, dòng đầu tiên được tạo

• Các InlineUIContainer là vì vậy chúng tôi có thể đặt nội dung phi văn bản thành một TextBlock

• Các ContentPresenter là để giữ nội dung thực tế, và nó có một lề trên tiêu cực để loại bỏ các không gian còn lại của đối tượng LineBreak.

Dưới đây là một số nội dung ví dụ:

<StackPanel> 
    <RadioButton Template="{StaticResource MultiLineRadioButtonTemplate}"> 
     <StackPanel> 
      <Label Content="Option 1" /> 
      <StackPanel> 
       <CheckBox Content="Some setting" /> 
       <CheckBox Content="Some other setting" /> 
      </StackPanel> 
     </StackPanel> 
    </RadioButton> 

    <RadioButton Template="{StaticResource MultiLineRadioButtonTemplate}"> 
     <StackPanel> 
      <Label Content="Option 2" /> 
      <DataGrid AutoGenerateColumns="False" Height="100"> 
       <DataGrid.Columns> 
        <DataGridTextColumn Header="Id" /> 
        <DataGridTextColumn Header="Date" /> 
        <DataGridTextColumn Header="Total" /> 
        <DataGridTextColumn Header="Count" /> 
       </DataGrid.Columns> 
      </DataGrid> 
     </StackPanel> 
    </RadioButton> 


    <RadioButton Template="{StaticResource MultiLineRadioButtonTemplate}"> 
     <StackPanel> 
      <Label Content="Option 3" /> 
      <TextBlock TextWrapping="WrapWithOverflow" Margin="2"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
       sed do eiusmod tempor incididunt ut labore et dolore magna 
       aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
       ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       Duis aute irure dolor in reprehenderit in voluptate velit 
       esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
       occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </TextBlock> 
     </StackPanel> 
    </RadioButton> 
</StackPanel> 

Và làm thế nào nó trông giống:

Điều duy nhất tôi thực sự không hài lòng về là lề trên tiêu cực đối với các ContentPresenter được mã hóa cứng, bởi vì nếu bạn thay đổi kích thước phông chữ của mình, bạn phải tự điều chỉnh lề đó. Có thể sẽ không khó để xây dựng bộ chuyển đổi cho thuộc tính Margin tính toán chiều cao của ngắt dòng ({TemplateBinding FontSize}?) Hoặc thậm chí là phiên bản mở rộng của điều khiển RadioButton có hành vi này theo mặc định, nhưng bây giờ tôi ổn với mã hóa -21 dựa trên kích thước phông chữ mặc định của ứng dụng của tôi.

Ngoài ra, bạn có thể muốn thêm một số TemplateBindings đến RadioButton trong Template nếu bạn muốn kế thừa tài sản khác từ bản gốc RadioButton, chẳng hạn như lợi nhuận, đệm, sự liên kết, vv Tôi chỉ bị ràng buộc để IsChecked với mục đích giữ nó đơn giản.