WPF Groupbox BorderThickness 이상하게 그려지는 문제

⁉️ 프로그래밍 언어 Q&A C# Q&A
1

WPF 에서 GroupBox 를 사용하던 중 이상한 현상을 발견하여 질문을 올려봅니다.

    <GroupBox BorderThickness="5" 
              Header="Header"
              Margin="10" 
              Padding="0">
        <StackPanel >
            <Button Content="Button1" Margin="10"/>
            <Button Content="Button2" Margin="10"/>
            <Button Content="Button3" Margin="10"/>
            <Button Content="Button4" Margin="10"/>
        </StackPanel>
    </GroupBox>

간단한 코드인데 그룹 박스 좌측 절반의 BorderThickness 가 제대로 그려지지 않는 현상이 발생했습니다.
혹시 해결 방법을 아시는 분이 있을까요…?

1개의 좋아요
2 
    <Grid x:Name="grid">
        <Viewbox >
            <GroupBox BorderThickness="5" Width="{Binding Path=ActualWidth, ElementName=grid}" Height="{Binding Path=ActualHeight, ElementName=grid}"
              Header="Header"
              Margin="10" 
              Padding="0">
                <StackPanel >
                    <Button Content="Button1" Margin="10"/>
                    <Button Content="Button2" Margin="10"/>
                    <Button Content="Button3" Margin="10"/>
                    <Button Content="Button4" Margin="10"/>
                </StackPanel>
            </GroupBox>
        </Viewbox>
     
    </Grid>

감싸고 있는 control보다 groupbox가 커서 그런것같은데…

2개의 좋아요
3

저도 궁금해서 확인해 보았습니다.

일단 원인은 WPF 기본 그룹박스 컨트롤에서 사용하는 템플릿에 OpacityMask 처리 부분이 문제 입니다.

GroupBox의 기본 템플릿을 들여다 보면 다음과 같이 BorderBrush 부분을
BorderGapMaskConverter 라는 내부 컨버터로 OpacityMask 처리 하고 있습니다.

<Border Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Grid.Column="0" Grid.ColumnSpan="4" Grid.RowSpan="3" Grid.Row="1"/>
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4" Grid.ColumnSpan="4" Grid.RowSpan="3" Grid.Row="2">
    <Border.OpacityMask>
        <MultiBinding ConverterParameter="7" Converter="{StaticResource BorderGapMaskConverter}">
            <Binding ElementName="Header" Path="ActualWidth"/>
            <Binding Path="ActualWidth" RelativeSource="{RelativeSource Mode=Self}"/>
            <Binding Path="ActualHeight" RelativeSource="{RelativeSource Mode=Self}"/>
        </MultiBinding>
    </Border.OpacityMask>
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
        <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
    </Border>
</Border>

코드를 보시면 OpacityMask 영역의 가로 사이즈 ActualWidth 속성을 바인딩해서 처리 하는데
저 가로 영역의 사이즈 만큼 OpacityMask 효과가 적용되어서 BorderThickness 부분이 짤려 보였던 것입니다.

따라서

<Binding Path="ActualWidth" RelativeSource="{RelativeSource Mode=Self}"/>

해당 부분을 제거하면 다음과 같이 정상으로 표시 되는것을 볼 수 있습니다.

추가로 해당 증상은 그룹박스의 Header 문자열 길이와 BorderThickness 수치에 따라 다르기 때문에
Header문자열이 길고 BorderThickness 수치를 높게 잡으면 바로 티나서 알 수 있습니다.


이미지 업로드가 안되서 그냥 다음과 같이 링크로 결과를 올려 드립니다.

<GroupBox Style="{DynamicResource GroupBoxStyle1}" BorderThickness="5" 
          BorderBrush="Red"
      Header="aaaa"
      Margin="10" 
      Padding="0">
</GroupBox>

[결과]

4개의 좋아요
4

답변해주신 분들 감사합니다 !

기본 템플릿 검색하여 적용하였더니 해결 되었습니다!

2개의 좋아요