11

複数行のラジオ ボタンがあり、箇条書きをラジオ ボタン コントロールの上部に揃えて (デフォルトで) コンテンツの左側に配置したいと考えています。XAML でこれを行う最も簡単な方法は何ですか?

4

3 に答える 3

17

注:レイチェルの回答を必ず確認してください。レイチェルは、この 1 段階をさらに一般的なテンプレートに取り入れています。

まず、VerticalAlignmentor VerticalContentAlignment(またはControlTemplate) で時間を無駄にしないでください。彼らはあなたが望むことや期待することをするつもりはありません。

MSDN a (CheckBox および RadioButton がラジオ/チェック ボタンをレンダリングするために使用するコントロール) で説明されてBulletDecoratorいるように、アイコンの位置が自動的に設定されます。これをさらに制御することはできません。

Child オブジェクトがテキスト オブジェクトの場合、Bullet は常にテキストの最初の行に揃えられます。Child オブジェクトがテキスト オブジェクトでない場合、Bullet は Child オブジェクトの中央に配置されます。

コントロール テンプレートを変更しない限り (不要)、コンテンツがテキストの場合にのみ、ラジオ/チェック アイコンを上部に配置できます。

VerticalAlignmentしたがって、このようなことを行うと、いくつのプロパティを設定しようとしてもアイコンを移動できないため、見栄えが悪くなります。

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

しかしTextBlock幸いなことに、 usingにはほとんど何でも入れることができます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>
于 2011-10-19T02:09:37.500 に答える
14

Simon Weaver の回答に基づいて比較的一般的なテンプレートを作成しました。これは、常にカスタマイズすることを覚えておく必要なく、ほとんどの状況で使用できますRadioButton.Content。

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

テンプレートの仕組みを説明するには:

  • TextBlockデフォルトでは、コンテンツが Text オブジェクトの場合、RadioButton の箇条書きは Text の最初の行に揃えられるためです (aは機能しLabelません) 。

  • はLineBreakコンテンツを新しい行に折り返すため、最初の行が作成されます

  • これInlineUIContainerは、非テキスト コンテンツをTextBlock

  • はContentPresenter実際のコンテンツを保持するためのもので、LineBreakオブジェクトによって残されたスペースを削除するために負の上部マージンがあります。

コンテンツの例を次に示します。

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

そしてそれがどのように見えるか：

ここに画像の説明を入力

私が本当に満足していない唯一のことは、ContentPresenterハードコードされているための負の上部マージンです.フォントサイズを変更した場合、そのマージンを手動で調整する必要があるためです.

Margin改行の高さ ( {TemplateBinding FontSize}?) を計算するプロパティのコンバーター、またはデフォルトでこの動作を持つ RadioButton コントロールの拡張バージョンを構築することはおそらくそれほど難しくありませんが、今のところ問題ありません。アプリケーションのデフォルトのフォントサイズに基づいて -21 をハードコーディングします。

また、マージン、パディング、アラインメントなど、元の から他のプロパティを継承したい場合は、 TemplateTemplateBindingsのにいくつか追加することもできます。単純にする目的でのみ にバインドしました。RadioButtonRadioButtonIsChecked

于 2013-05-02T16:13:43.540 に答える
2

RadioButton の Control.Template をオーバーライドします。MSDNラジオ ボタン コントロール テンプレートの例からの例を次に示します。

ラジオ ボタンの Control.Template をオーバーライドしたくない場合は、コンテンツをラップされた TextBlock にすることができます。このサンプルを参照してください

<RadioButton  Name="radioButton1">
    <TextBlock TextWrapping="Wrap">Here is some multiline text that does some wrapping</TextBlock>
</RadioButton>
于 2009-02-10T19:19:57.820 に答える