Button클릭 시 밑줄(?) 질문 드립니다.

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

1111

그림과 같이 아무것도 클릭 안 했을땐 검은색 밑줄만 있다고 했을때

A그룹을 누르면 A그룹 버튼부분만 빨간색으로 나오고 B그룹을 누르면 파란색으로 저 부분만 나오는 방식으로 만들고 싶은데 어떻게 해야할까요…?

생각으론 버튼에 BorderBrush 색을 줘서 BorderThickness 으로 아래부분만 색을 줘야하나 싶습니다.

혹시 다른 방법이 있을까요?

2 Likes
2
  1. 컨트롤 라이브러리를 사용하셨나요?
  2. 어떤 종류의 컨트롤을 사용했는지 알수있을까요?

우선 현 상황이 어떤지를 좀 더 알아야 도와드릴수있을거 같네요 :slight_smile:

2 Likes
3
  1. 사용자 정의 컨트롤 라이브러리(xaml-cs)구조 사용했습니다.
    2.일단은 Button 컨트롤로 사용했습니다… 만드려고 하는건 위의 그림처럼
    A그룹 B그룹 중 하나를 눌렀을때 눌렀다는걸 지속적으로 확인하기 위해 긴 밑줄에서 밑에 확인용 밑줄이 쳐지는 것을 만들고 싶습니다.
2 Likes
4

우선 구현하는 방법은 다양하다보니 제약조건이 없다고 하시면
제가 샘플로 올려드릴게요~

2 Likes
5

앗 샘플로 올려주시면 감사합니다!

2 Likes
6

우선 일반 버튼으로 하기엔 일일이
‘버튼 첫번째 꺼 눌렀을 땐 나머지 border 수정’
하는 불편함을 제거하기위해 RadioButton 대체하였습니다.

  1. Style에 GroupName으로 지정하여 같은 그룹 으로 인지시켜주고자 ButtonGroup 만들었습니다.
  2. <ControlTemplate.Triggers> 이부분에는 선택되었을 때 색상 변경을 주고자 이벤트 처리하였습니다.

아래 그림과 코드는 동작예시와 그 동작된 샘플 코드입니다.
참고하세요 :slight_smile:

image
image786×443 4.28 KB

image
image786×443 4.28 KB

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

P.S 가만히있을때와 …하나눌린 이후부터는 처리를 생각안했네요!..

1 Like
8

오…! 감사합니다 한번 해보겠습니다!

2 Likes
9

질문이 있습니다
혹시 샘플에서는 Grid.column 으로 가로 크기를 다 채워서 가로 범위를 다 채우셨는데

혹시 제 그림처럼 그룹은 2개, 오른쪽은 빈 여백이라 했을때 더이상 내용물이 없기 때문에 BorderThickness가 그려지지 않을텐데 혹시 어떻게 해야할까요?

2 Likes
10

WPF는 워낙 표현이 다양해서 정답은 없습니다만
참고하시길 바랍니다.

Border를 별도로 또 만들시면됩니다. :slight_smile:

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

아 그런방법이…! 생각이 짧았네요 감사합니다!

2 Likes