3

2 つのラジオ ボタン (オプション 1とオプション 2 )を含むスタック パネルがあります。ユーザーがオプション 2 を選択すると、ユーザーがオプション 2 に関する詳細を入力できるテキストボックスがアクティブになります。

私は2つの解決策を思いつきましたが、どれもまさに私が望んでいるものではありません. これは彼らがどのように見えるかです：

解決策 1 と 2 のスクリーンショット

解決策 1

ソリューション #1 の XAML コードは非常に単純で、結果は非常に明白です。

    <StackPanel Grid.Row="7" Grid.Column="1">
        <RadioButton>Option 1</RadioButton>
        <RadioButton>Option 2:</RadioButton>
        <TextBox>Some Text that details option 2</TextBox>
    </StackPanel>

ここで良いのは、テキスト ボックスが幅全体を使用することです。それにもかかわらず、テキストボックスはオプション 2 の隣に配置する必要があるため、それは私が望んでいたことではありません。

解決策 2

次のステップは、RadioButton タグにグリッドを作成することでした。これにより、テキストボックスを適切な位置に配置できましたが、幅が 100% まで拡大されなくなりました。

コードは次のようになります。

    <StackPanel Grid.Row="8" Grid.Column="1">
        <RadioButton>Option 1</RadioButton>
        <RadioButton>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="130*" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" >Option 2:</TextBlock>
                <TextBox Grid.Column="1" Margin="10,0,0,0">Some Text that details option 2</TextBox>
            </Grid>
        </RadioButton>
    </StackPanel>

これがかなり過剰に設計されたソリューションのように見えるという点に加えて、質問はここにあります:ラジオ ボタン エントリ内のグリッドの幅を 100% に設定する方法は?

同様の質問がここで尋ねられました ( WPF で幅を 100% に設定する方法) が、ItemContainerStyleプロパティを使用してもラジオボタンでは機能しません。

私の目には、はるかに簡単な (または少なくとも機能する) 解決策があるに違いありません。誰でも助けることができますか？

4

3 に答える 3

4

これを使って：

<StackPanel Grid.Row="8"
            Grid.Column="1">
    <RadioButton>Option 1</RadioButton>
    <RadioButton HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
        <DockPanel  LastChildFill="True">
            <TextBlock >Option 2:</TextBlock>
            <TextBox Grid.Column="1"  
                     Margin="10,0,0,0">Some Text that </TextBox>
        </DockPanel>
    </RadioButton>
</StackPanel>

または、グリッドを保持したい場合:

 <StackPanel Grid.Row="8"
            Grid.Column="1">
    <RadioButton>Option 1</RadioButton>
    <RadioButton HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
        <Grid  HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock >Option 2:</TextBlock>
            <TextBox Grid.Column="1"  
                     Margin="10,0,0,0">Some Text that </TextBox>
        </Grid>
    </RadioButton>
</StackPanel>
于 2012-12-25T16:21:33.307 に答える
0

あなたが試すことができる多くのことがあります -

  1. 2 番目の RadioButton の Horizo​​ntalAlignment を「Stretch」に設定します。
  2. 代わりにグリッドに設定してみてください。
  3. ColumnDefinition を「Auto」に設定し、別の ColumnDefinition を「130*」に設定しても意味がありません。最初のものは Auto (コンテンツに合わせてサイズを調整) に、2 つ目は "*" (使用可能なすべてのスペースを使用) にします。

* サイズは相対的です。1* と 2* がある場合、2* は常に 1* の 2 倍になります。0.5* と 1* の場合も同じで、最初のものは常に 1* の半分のサイズになります。

両方の ColumnDefinitions を Auto に設定しようとしましたか?

それ以外の場合、この種のトラブルシューティングに使用できるのは、要素の周りに境界線を適用することです (各要素は異なる境界線の色になります)。どのコントロールが原因であるかを見つけるのに役立ちます。

于 2012-12-25T16:16:02.760 に答える