그림과 같이 아무것도 클릭 안 했을땐 검은색 밑줄만 있다고 했을때
A그룹을 누르면 A그룹 버튼부분만 빨간색으로 나오고 B그룹을 누르면 파란색으로 저 부분만 나오는 방식으로 만들고 싶은데 어떻게 해야할까요…?
생각으론 버튼에 BorderBrush 색을 줘서 BorderThickness 으로 아래부분만 색을 줘야하나 싶습니다.
혹시 다른 방법이 있을까요?
2개의 좋아요
- 컨트롤 라이브러리를 사용하셨나요?
- 어떤 종류의 컨트롤을 사용했는지 알수있을까요?
우선 현 상황이 어떤지를 좀 더 알아야 도와드릴수있을거 같네요 
2개의 좋아요
- 사용자 정의 컨트롤 라이브러리(xaml-cs)구조 사용했습니다.
2.일단은 Button 컨트롤로 사용했습니다… 만드려고 하는건 위의 그림처럼
A그룹 B그룹 중 하나를 눌렀을때 눌렀다는걸 지속적으로 확인하기 위해 긴 밑줄에서 밑에 확인용 밑줄이 쳐지는 것을 만들고 싶습니다.
2개의 좋아요
우선 구현하는 방법은 다양하다보니 제약조건이 없다고 하시면
제가 샘플로 올려드릴게요~
2개의 좋아요
앗 샘플로 올려주시면 감사합니다!
2개의 좋아요
우선 일반 버튼으로 하기엔 일일이
‘버튼 첫번째 꺼 눌렀을 땐 나머지 border 수정’
하는 불편함을 제거하기위해 RadioButton 대체하였습니다.
- Style에 GroupName으로 지정하여 같은 그룹 으로 인지시켜주고자 ButtonGroup 만들었습니다.
- <ControlTemplate.Triggers> 이부분에는 선택되었을 때 색상 변경을 주고자 이벤트 처리하였습니다.
아래 그림과 코드는 동작예시와 그 동작된 샘플 코드입니다.
참고하세요
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<Grid.Resources>
<Style x:Key="rbTabStyle" TargetType="{x:Type RadioButton}">
<Setter Property="GroupName" Value="ButtonGroup" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<RadioButton
Grid.Column="0"
Content="탭 1"
Style="{StaticResource rbTabStyle}" />
<RadioButton
Grid.Column="1"
Content="탭 2"
Style="{StaticResource rbTabStyle}" />
<RadioButton
Grid.Column="2"
Content="탭 3"
Style="{StaticResource rbTabStyle}" />
<RadioButton
Grid.Column="3"
Content="탭 4"
Style="{StaticResource rbTabStyle}" />
<RadioButton
Grid.Column="4"
Content="탭 5"
Style="{StaticResource rbTabStyle}" />
</Grid>
2개의 좋아요
P.S 가만히있을때와 …하나눌린 이후부터는 처리를 생각안했네요!..
1개의 좋아요
오…! 감사합니다 한번 해보겠습니다!
2개의 좋아요
질문이 있습니다
혹시 샘플에서는 Grid.column 으로 가로 크기를 다 채워서 가로 범위를 다 채우셨는데
혹시 제 그림처럼 그룹은 2개, 오른쪽은 빈 여백이라 했을때 더이상 내용물이 없기 때문에 BorderThickness가 그려지지 않을텐데 혹시 어떻게 해야할까요?
2개의 좋아요
WPF는 워낙 표현이 다양해서 정답은 없습니다만
참고하시길 바랍니다.
Border를 별도로 또 만들시면됩니다.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<Border
Grid.Row="0"
Padding="0"
BorderBrush="Black"
BorderThickness="0,0,0,1"
SnapsToDevicePixels="True"
UseLayoutRounding="True" />
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style x:Key="rbTabStyle" TargetType="{x:Type RadioButton}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="GroupName" Value="ButtonGroup" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<RadioButton
Grid.Column="0"
Content="탭 1"
Style="{StaticResource rbTabStyle}" />
<RadioButton
Grid.Column="1"
Content="탭 2"
Style="{StaticResource rbTabStyle}" />
</Grid>
</Grid>
2개의 좋아요
아 그런방법이…! 생각이 짧았네요 감사합니다!
2개의 좋아요