WPF ControlTemplate Style Binding 문제

물냉면이먹고싶어요 · 9월 5, 2023, 6:53오전

안녕하세요.

Button Over시 Background에 이미지1을,
Button Leave시 Background에 이미지2를 올리려고합니다.

해당 블로그를 통해 접근법을 찾았고 ControlTemplate를 사용하여 이 부분을 처리하는 과정에 문제가 발생하여 질문드립니다.

Xaml UserControl.Resources

    <UserControl.Resources>
        <ControlTemplate TargetType="Button" x:Key="RoundButtonTemplate">
            <Border Background="{TemplateBinding Background}" CornerRadius="15">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </ControlTemplate>

        <Style TargetType="{x:Type Button}" x:Key="TriggerButtonOver">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="{Binding BtnUp}"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>

                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="{Binding BtnOver}"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

Button (Over, Leave)

            <Button Width="100" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Right"
                    Margin="0,0,60,60"
                    Visibility="{Binding NextBtnVisibility}" 
                    Command="{Binding CommandToNextPageU}" 
                    Style="{StaticResource TriggerButtonOver}" 
                    Template="{StaticResource RoundButtonTemplate}">
            </Button>

ViewModel

        public Color BtnUp
        {
            get { return Color.FromArgb(255, 0, 0, 0); }
        }

        public Color BtnOver
        {
            get { return Color.FromArgb(255,255,0,0); }
        }

‘대상 요소의 관리하는 FrameworkElement 또는 FrameworkContentElement를 찾을 수 없습니다.’

과 같이 Value의 값을 직접 넣어주는 경우, 문제가 없었지만
해당 부분에 Binding 처리를 하니 위와 같은 Xaml 오류가 나타납니다.
기능 상에는 문제가 없어보이는데, 잘못된 처리 방법인 것 같아 어떻게 처리하면 좋은지 궁금하여 질문드립니다… 도와주세요…ㅠㅠ

aroooong · 9월 5, 2023, 7:19오전

그냥 다음과 같이 바로 Background속성에 Brush를 바인딩 처리 하시면 됩니다.

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="False">
        <Setter Property="Background" Value="{Binding BtnUp}"/>
    </Trigger>

    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="{Binding BtnOver}"/>
    </Trigger>
</Style.Triggers>

public Brush BtnUp
{
    get { return (SolidColorBrush)(new BrushConverter().ConvertFrom("#FFFF0000")); }
}

public Brush BtnOver
{
    get { return (SolidColorBrush)(new BrushConverter().ConvertFrom("#FFFFFF00")); }
}

그런데 그냥 읽기 전용 속성 대상을 바인딩 처리 하는 것은 의미가 없습니다.
읽기전용 속성을 바인딩 하기 보단 그냥 하드코딩으로 값을 직접 할당 하시는것이 낫습니다.

이광석 · 9월 5, 2023, 7:19오전

물냉면이먹고싶어요:

<Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background">
             <Setter.Value>
                  <SolidColorBrush Color="{Binding BtnOver}"/>
              </Setter.Value>
       </Setter>
</Trigger>

<Trigger Property="IsMouseOver" Value="True">
     <Setter Property="Background" Value="{Binding BtnOver}"/>
     </Setter>
</Trigger>

@aroooong 님이 먼저 올려주셨네요

물냉면이먹고싶어요 · 9월 5, 2023, 7:50오전

오! ㅠㅠ 답변 감사합니다! 덕분에 해결 방법을 찾았습니다.

실제로는 동적으로 로드된 이미지를 Background에 ImageBrush를 사용하여 올리려 하고있습니다.

버튼의 Up, Down 상태에 따른 이미지가 빌드된 바이너리에
지속적으로 이미지만 교체하여 사용해야합니다… ㅠㅠ (유저가 직접 교체할 수 있도록)

때문에 지금은 프로그램 실행 시 정해진 경로에서 이미지를 불러 저장시키고
아래 방법으로 버튼의 이미지만 Binding 처리하는데 혹시 이 방법도 잘못된 방법일까요…?
프로그램 경험이 짧아서 좋은 구조를 설계하는데 어려움이 있습니다.

정석적인 방법이 있다면 키워드 좀 부탁드릴게요

        public ImageBrush BtnOver
        {
            get { return new ImageBrush(_resourceManager.btnINext[1]); }
        }


        public ImageBrush BtnUp
        {
            get { return new ImageBrush(_resourceManager.btnINext[0]); }
        }

물냉면이먹고싶어요 · 9월 5, 2023, 7:58오전

답변 감사합니다!

aroooong · 9월 5, 2023, 8:00오전

물냉면이먹고싶어요:

public ImageBrush BtnOver
        {
            get { return new ImageBrush(_resourceManager.btnINext[1]); }
        }


        public ImageBrush BtnUp
        {
            get { return new ImageBrush(_resourceManager.btnINext[0]); }
        }

이렇게 읽기 전용 속성을 이용하면 해당 컨트롤을 사용하는 입장에서는 해당 기능에 대한 ‘설정’ 선택권이 없고, 이미지가 변경 된다던가 한 경우 직접 해당 컨트롤 자체를 수정해야 합니다.

또한 해당 컨트롤이 수정 된다면 사용되는 쪽에서도 2차 변경을 해야 하는 발생도 있을 수 있구요

개발 관점으로 보았을때

해당 컨트롤을 제공하는 입장에서 이미지를 직접 바인딩해서 사용 할 수 있도록 '기능’을 제공해 주는 것이 좋습니다.

<이미지버튼 Normal="{Binding ~~~}"
                     Over="{Binding ~~~~~~}" />

처럼요

다음 코드를 참고해서 이미지버튼 자체의 커스텀 컨트롤 만들어 사용 될 수 있도록 해보세요.

[이미지 버튼 커스텀 컨트롤]
WPFKakaoTalk/Common/Controls/ImageButton.cs at master · tyeom/WPFKakaoTalk (github.com)

[스타일]
WPFKakaoTalk/Common/Themes/Generic.xaml at master · tyeom/WPFKakaoTalk (github.com)

물냉면이먹고싶어요 · 9월 5, 2023, 8:55오후

답변 감사합니다! +

덕분에 어떻게 방향성을 설정하고 좋은 설계를 할 수 있는지에 대해 알게 되었습니다.