2013-07-01 2 views
0

주위를 둘러 보면서 라디오 버튼처럼 작동하는 GroupBox를 만들기를 바라고 있습니다. 헤더 섹션은 총알 역할을합니다. 나는 그것을보고하는 방법이다이 질문에라디오 버튼에 헤더를 추가하는 XAML

Styling a GroupBox

에서 일부 코드를했다. 그러나 나는 그것을 라디오 버튼으로 갖고 싶어. 그래서 나는 다음이 코드 (난 단지 지금은 주 2 WPF를 해왔을 마음)

<Style TargetType="{x:Type RadioButton}" > 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type RadioButton}"> 
        <BulletDecorator> 
         <BulletDecorator.Bullet> 
          <Grid> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="Auto" /> 
            <RowDefinition Height="*" /> 
           </Grid.RowDefinitions> 
           <Border x:Name="SelectedBorder" 
             Grid.Row="0" 
             Margin="4" 
             BorderBrush="Black" 
             BorderThickness="1" 
             Background="#25A0DA"> 
            <Label x:Name="SelectedLabel" Foreground="Wheat"> 
             <ContentPresenter Margin="4" /> 
            </Label> 
           </Border> 
           <Border> 

           </Border> 
          </Grid> 
         </BulletDecorator.Bullet> 
        </BulletDecorator> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter TargetName="SelectedBorder" Property="Background" Value="PaleGreen"/> 
          <Setter TargetName="SelectedLabel" 
            Property="Foreground" 
            Value="Black" /> 
         </Trigger> 

        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

내가 내 그리드의 두 번째 행에 레이블을 추가 할 수 있습니다 느낌이 듯했지만 나는 그것에 접근하는 방법을 모른다. 나는 Window.Resources 섹션에서 테스트 프로젝트에서 템플릿 내 윈도우 XAML (나는 내 ​​주요 프로젝트에 리소스 사전에 이동 계획) 것을 가지고하는 것은 내가 다음과 같은 뭔가 희망이

<Grid> 
    <GroupBox Name="grpDoor" Margin ="8" Grid.Row="0" Grid.Column="0"> 
     <GroupBox.Header> 
      WPF RadioButton Template 
     </GroupBox.Header> 
     <StackPanel Margin ="8"> 
      <RadioButton FontSize="15" Content="Dhaka" Margin="4" IsChecked="False"/> 
      <RadioButton FontSize="15" Content="Munshiganj" Margin="4" IsChecked="True" /> 
      <RadioButton FontSize="15" Content="Gazipur" Margin="4" IsChecked="False" /> 
     </StackPanel> 
    </GroupBox> 
</Grid> 

입니다 당신의 설명을 바탕으로

<Grid> 
    <GroupBox Name="grpDoor" Margin ="8" Grid.Row="0" Grid.Column="0"> 
     <GroupBox.Header> 
      WPF RadioButton Template 
     </GroupBox.Header> 
     <StackPanel Margin ="8"> 
      <RadioButton FontSize="15" 
          Content="Dhaka" 
          Margin="4" 
          IsChecked="False"> 
       <RadioButton.Description> 
        This is a description that would show under my Header 
       </RadioButton.Description> 
      </RadioButton> 
      <RadioButton FontSize="15" 
          Content="Munshiganj" 
          Margin="4" 
          IsChecked="True"> 
       <RadioButton.Description> 
        This is a description that would show under my Header 
       </RadioButton.Description> 
      </RadioButton> 
      <RadioButton FontSize="15" 
          Content="Gazipur" 
          Margin="4" 
          IsChecked="False"> 
       <RadioButton.Description> 
        This is a description that would show under my Header 
       </RadioButton.Description> 
      </RadioButton> 
     </StackPanel> 
    </GroupBox> 
</Grid> 
+0

설명해주세요. RadioButton처럼 동작하는 GroupBox가 필요합니까? 그렇다면 RadioButton을 사용하고 GroupBox 세트처럼 보이도록 스타일을 지정하는 것이 더 쉽습니다. – Trevor

+0

@ Trevor yeah 내 계획입니다. –

답변

1

이 (그래도 난 아직 할 거라고 방법을 잘하지 않음), 여기에 그룹 상자처럼 보이는의 RadioButton와 아주 간단한 예이다.

<Window x:Class="MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:WpfApplication1" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.DataContext> 
     <local:SimpleViewModel/> 
    </Window.DataContext> 
    <Window.Resources> 
     <DataTemplate DataType="{x:Type local:SimpleOption}"> 
      <RadioButton GroupName="choice" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"> 
       <RadioButton.Template> 
        <ControlTemplate TargetType="{x:Type RadioButton}"> 
         <GroupBox x:Name="OptionBox" Header="{Binding Path=DisplayName, Mode=OneWay}"> 
          <TextBlock Text="{Binding Path=Description, Mode=OneWay}"/> 
         </GroupBox> 
         <ControlTemplate.Triggers> 
          <DataTrigger Binding="{Binding Path=IsSelected, Mode=OneWay}" Value="True"> 
           <Setter TargetName="OptionBox" Property="Background" Value="Blue"/> 
          </DataTrigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </RadioButton.Template> 
      </RadioButton> 
     </DataTemplate> 
    </Window.Resources> 
    <Grid> 
     <ListBox ItemsSource="{Binding Path=Options, Mode=OneWay}"/> 
    </Grid> 
</Window> 

public class SimpleViewModel 
{ 

    public SimpleViewModel() 
    { 
     Options = new ObservableCollection<SimpleOption>(); 
     var _with1 = Options; 
     _with1.Add(new SimpleOption { 
      DisplayName = "Dhaka", 
      Description = "This is a description for Dhaka." 
     }); 
     _with1.Add(new SimpleOption { 
      DisplayName = "Munshiganj", 
      Description = "This is a description for Munshiganj.", 
      IsSelected = true 
     }); 
     _with1.Add(new SimpleOption { 
      DisplayName = "Gazipur", 
      Description = "This is a description for Gazipur." 
     }); 
    } 

    public ObservableCollection<SimpleOption> Options { get; set; } 

} 

public class SimpleOption : INotifyPropertyChanged 
{ 

    public string DisplayName { 
     get { return _displayName; } 
     set { 
      _displayName = value; 
      NotifyPropertyChanged("DisplayName"); 
     } 
    } 

    private string _displayName; 
    public string Description { 
     get { return _description; } 
     set { 
      _description = value; 
      NotifyPropertyChanged("Description"); 
     } 
    } 

    private string _description; 
    public bool IsSelected { 
     get { return _isSelected; } 
     set { 
      _isSelected = value; 
      NotifyPropertyChanged("IsSelected"); 
     } 
    } 

    private bool _isSelected; 
    private void NotifyPropertyChanged(string propertyName) 
    { 
     if (PropertyChanged != null) { 
      PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
     } 
    } 
    public event PropertyChangedEventHandler INotifyPropertyChanged.PropertyChanged; 
    public delegate void PropertyChangedEventHandler(object sender, PropertyChangedEventArgs e); 

} 
1

사용자 지정 첨부 속성으로 처리합니다. 그런 식으로 ViewModel에서 바인딩하거나 XAML에서 직접 적용 할 수 있습니다.

먼저 Style 어셈블리에 새로운 클래스를 만들 :

public static class RadioButtonExtender 
{ 
    public static readonly DependencyProperty DescriptionProperty = DependencyProperty.RegisterAttached(
     "Description", 
     typeof(string), 
     typeof(RadioButtonExtender), 
     new FrameworkPropertyMetadata(null)); 

    [AttachedPropertyBrowsableForType(typeof(RadioButton))] 
    public static string GetDescription(RadioButton obj) 
    { 
     return (string)obj.GetValue(DescriptionProperty); 
    } 

    public static void SetDescription(RadioButton obj, string value) 
    { 
     obj.SetValue(DescriptionProperty, value); 
    } 
} 

그리고 스타일의 Bullet 레이블이되도록 변경합니다 :

<Label x:Name="SelectedLabel" 
     Foreground="Wheat" 
     Content="{Binding (prop:RadioButtonExtender.Description), RelativeSource={RelativeSource TemplatedParent}} /> 

그런 다음 최종 XAML에서 사용할 수 :

<RadioButton FontSize="15" 
      Content="Dhaka" 
      Margin="4" 
      IsChecked="False"> 
    <prop:RadioButtonExtender.Description> 
     This is a description that would show under my Header 
    </prop:RadioButtonExtender.Description> 
</RadioButton> 

추가 보너스로 0을 생성하므로을 별도의 어셈블리에 사용하면 속성을 쉽게 사용할 수 있도록 custom XAML namespace을 만들 수 있습니다.

관련 문제