WPF ControlTemplate Style Binding 문제

Q&A
1

안녕하세요.

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); }
        }

image
image1290×148 9.42 KB

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

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

2

그냥 다음과 같이 바로 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")); }
}

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

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

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

4

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

실제로는 동적으로 로드된 이미지를 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]); }
        }
5

답변 감사합니다! :smile:

6

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


또한 해당 컨트롤이 수정 된다면 사용되는 쪽에서도 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)

7

답변 감사합니다! +

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