ラジオボタンのヒットサイズを増やす

Question

私は何年もWindowsフォームを使用してきましたが、私は比較的新しいWPFです。私はラベルのない多数のラジオボタンを持っています（ラベルはコラムの一番上にありますので、心配しないでください！このプログラムはタブレット上で実行されるので、ラジオボタンのヒットエリアを大きくしたいできるだけ私も彼らの列と行の中央にあるようにラジオボタンを必要とする

私は、グリッドの各列にこれを追加することによって、私が望む外観を得ることができます。。

<Label Name="connectedLabel" Grid.Column="2" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"> 
    <RadioButton x:FieldModifier="private" Name="connectedRadioButton" Grid.Column="2" Checked="otherRadioButton_CheckedChanged" Unchecked="otherRadioButton_CheckedChanged"></RadioButton> 
</Label> 

どのばかり
明らかに、ビヘイビアはすべて間違っています（イベントが通過しない、同じ行に複数のラジオボタンを選択するなど）。

これはWinformsのケーキですが、私はそこにWPFの簡単な解決策があると思っています。

誰でも手伝いできますか？

編集：オレンジ色の領域がラジオボタンのデフォルトのヒット領域です。緑色の領域は、必要なヒット領域です。今のところ、これは、カスタム配線のRadioButtonのプロパティが役立つはず

Answer 1

問題の新しいイメージごとに編集してください。

あなたがこれを使用することができ、余分なタイピングを気にしない場合：

 <Style TargetType="RadioButton" x:Key="rb"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="RadioButton"> 
         <Grid> 
          <RadioButton IsChecked="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=TemplatedParent}}" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
          <Border Background="Transparent" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

の私の小さなテストアプリケーションに期待されるように、これは動作します：

のように見えます

<Grid> 
    <Grid.Resources> 
     <Style TargetType="RadioButton" x:Key="rb"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="RadioButton"> 
         <Grid> 
          <RadioButton IsChecked="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=TemplatedParent}}" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
          <Border Background="Transparent" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

     <Style TargetType="ListBoxItem" x:Key="ics"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ListBoxItem"> 
         <Grid ShowGridLines="True"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition /> 
           <ColumnDefinition /> 
           <ColumnDefinition /> 
           <ColumnDefinition /> 
          </Grid.ColumnDefinitions> 

          <RadioButton HorizontalAlignment="Center" VerticalAlignment="Center" /> 
          <RadioButton HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1" /> 
          <RadioButton Style="{StaticResource rb}" Grid.Column="2" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Grid.Resources> 

    <ListBox ItemContainerStyle="{StaticResource ics}"> 
     <ListBoxItem>1</ListBoxItem> 
    </ListBox> 
</Grid> 

：

（明らかに、提供されている3番目の方法を使用したい）

これはあまり見た目にはならないが、あなたの結果がわかる。繰り返しますが、余分なタイピングと使用されるコーディング標準の欠如を許してください。

このため、マウスのホバーオーバーは視覚効果を与えませんが、ヒットテストは有効です。これがタブレット上にあり、あなたが指を追跡しない限り、これはOKだろうと私は考えている。あなただけのコントロールがより大きなサイズのものにしたい場合は

---

あなたがScaleTransformオブジェクトにRenderTransformプロパティを設定することによって、コントロールのサイズを変更することができ、次の方法

を使用することができます。

コンテナ内のすべてのRadioButtonオブジェクトのサイズを変更（ウィンドウ、ページ、グリッドなど）のキー

<Style TargetType="RadioButton" x:Key="resizeRadioButton"> 
     <Setter Property="RenderTransform"> 
      <Setter.Value> 
       <ScaleTransform ScaleX="10" ScaleY="10"/> 
      </Setter.Value> 
     </Setter> 
    </Style> 

と

<Window.Resources> 
    <Style TargetType="RadioButton"> 
     <Setter Property="RenderTransform"> 
      <Setter.Value> 
       <ScaleTransform ScaleX="10" ScaleY="10"/> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

またはすべての使用法：

<RadioButton Style="{StaticResource resizeRadioButton}" /> 

、または個別に

<RadioButton> 
    <RadioButton.RenderTransform> 
     <ScaleTransform ScaleX="10" ScaleY="10"/> 
    </RadioButton.RenderTransform> 
</RadioButton> 

---

あなたはより大きなコントロールと大きなヒット領域（またはセットタイプのすべてのコントロールのためだけに大きなヒット領域）の組み合わせを使用したいが場合、次のことができます使用：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

    <Style TargetType="RadioButton"> 
     <Setter Property="RenderTransformOrigin" Value="0.5,0.5" /> 
     <Setter Property="HorizontalAlignment" Value="Center" /> 
     <Setter Property="VerticalAlignment" Value="Center" /> 

     <Setter Property="RenderTransform"> 
      <Setter.Value> 
       <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/> 
      </Setter.Value> 
     </Setter> 

     <Setter Property="Content"> 
      <Setter.Value> 
       <Border> 
        <Rectangle Margin="-10" Fill="Transparent" /> 
       </Border 
      </Setter.Value> 
     </Setter> 
    </Style> 

</ResourceDictionary> 

それとも別のコンテナ内のコントロールのデフォルトの動作を使用して、HorizontalAlignment="Stretch"小道具を使いますerty、これは私が信じている左上隅にコントロールを描画します。

Answer 2

GroupNameの多くなしには不可能募集しています。それぞれのラジオボタンで同じように設定してください、gl & hf！

<RadioButton GroupName="MyGroup1"> 
<RadioButton GroupName="MyGroup1"> 
<RadioButton GroupName="MyGroup1"> 
<RadioButton GroupName="MyGroup2"> 
<RadioButton GroupName="MyGroup2"> 
<RadioButton GroupName="MyGroup3"> 

各グループは期待どおりに動作します。グループ内のRadioButtonは1つだけチェックされます。

Answer 3

は、[私はちょうど脂肪とstukselbaxの解決時に追加している]

あなたがラジオボタンのTemplateを変更する必要がありますようです。 Bellowは、デフォルトのAero（Win7）スタイルで、テンプレートが変更されています。コード内のコメントを参照してください。コードを動作させるには、この名前空間を追加してください：xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"とPresentationFramework.Aero.dllアセンブリを参照してください。

<Style x:Key="CheckRadioFocusVisual"> 
    <Setter Property="Control.Template"> 
     <Setter.Value> 
      <ControlTemplate> 
       <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
<Style TargetType="{x:Type RadioButton}"> 
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
    <Setter Property="Background" Value="#F4F4F4"/> 
    <Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type RadioButton}"> 
       <BulletDecorator Background="Transparent"> 
        <BulletDecorator.Bullet> 
         <Grid> 
          <!--This is where you decide about the size of the hit area, the Border bellow has to be transparent and it's acting as the hit area. The Width and Height on the BulletChrome is a modification to bring the size of the bullet back to original size (or close to it)--> 
          <Border Background="Transparent" Width="50" Height="50"/> 
          <Microsoft_Windows_Themes:BulletChrome Width="20" Height="20" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" IsRound="true" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/> 
         </Grid> 
        </BulletDecorator.Bullet> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </BulletDecorator> 
       <ControlTemplate.Triggers> 
        <Trigger Property="HasContent" Value="true"> 
         <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/> 
         <Setter Property="Padding" Value="4,0,0,0"/> 
        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>