ToggleButton 클릭 시, Checked 상태에서는 버튼의 Background 색상과 버튼의 토글 스위치가 우측으로 이동하는 애니메이션이 추가된 ToggleButton 의 스타일을 만들고 있습니다.
EventTrigger를 사용해서 하단에 ColorAnimation 과 DoubleAnimation 을 추가하여 버튼 클릭 시 스위치가 우측으로 이동하면서 Background가 청색으로 변하고, 다시 클릭 시, 스위치가 좌측으로 이동하면서 Background가 흰색으로 변합니다.
구현 자체는 잘 되었으나, 구현한 스타일을 적용한 버튼이 존재하는 UserControl 을 벗어났다가 다시 돌아오면 해당 에러가 나타납니다.
메인 페이지 윈도우 하단에 Frame을 만들고, 미리 만들어둔 Usercontrol을 Frame의
Source에 model 변수로 바인딩해서 여러 컨트롤을 전환하는 형태로 만들었습니다.
Frame에 연결된 A라는 UserControl에 ToggleButton을 구현하고 ON으로 전환해둔 다음에, Frame에 연결된 UserControl을 다른 거로 바꾸고 다시 A로 돌아오면 저 에러가 발생합니다.
파트에서 에러가 발생하는데, 토글버튼 ControlTemplate 내부에 작성한 Border의 이름이 System.Windows.Controls.ControlTemplate 의 이름 범위 안에 없습니다. 라는 내부 예외로 나타납니다.
Frame의 Source Uri 를 model 변수로 바인딩하고 메인윈도우의 버튼으로 다른 UserControl의 Uri를 Frame Source로 할당하는 과정에서 ControlTemplate에서 Border 이름을 가져오지 못하는 것 같습니다.
왜 이런 현상이 나타나는지를 찾아보아도 잘 나오지 않아 질문을 올립니다. ㅠㅠ
혹시 EventTrigger 를 사용하려면, 바인딩을 Event하고 해야하는 걸까요?
지금은 IsChecked 속성과 바인딩을 해둔 상태입니다…
아래는 제가 작성한 Style의 코드입니다.
<Style x:Key="toggleButtonOptic" TargetType="{x:Type ToggleButton}">
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="64"/>
<Setter Property="Margin" Value="25 0 0 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid Margin="0 0 0 0" Width="64" Height="32" HorizontalAlignment="Center" VerticalAlignment="Center">
<Border x:Name="BorderToggle"
Background="{StaticResource ColorTypographySub_LineMain}"
CornerRadius="16"
Height="32" Width="64"
Margin="0 0 0 0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas Background="Transparent">
<Ellipse x:Name="EllipseToggle"
Height="24" Width="24"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Canvas.Left="4"
Canvas.Top="4"
Fill="{StaticResource ColorWhite}">
</Ellipse>
</Canvas>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!-- EventTrigger Checked -->
<EventTrigger RoutedEvent="Checked" >
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderToggle"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
From="#B5B5B5" To="#66CAB9" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetName="EllipseToggle"
Storyboard.TargetProperty="(Canvas.Left)"
From="4" To="36" Duration="0:0:0.15"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Unchecked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderToggle"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
From="#66CAB9" To="#B5B5B5" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetName="EllipseToggle"
Storyboard.TargetProperty="(Canvas.Left)"
From="36" To="4" Duration="0:0:0.15"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="EllipseToggle" Property="Fill" Value="#66CAB9"/>
</Trigger>
-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
위 스타일을 적용한 버튼은 아래와 같이 적용했습니다.
<ToggleButton Style="{StaticResource toggleButtonOptic}" IsChecked="{Binding opticControlModel.LeftLaserShutterOn}"/>
View 와 Model은 별도의 폴더에서 관리하는 중이라, namespace가 중간에서 달라져서, 완전히 겹치지는 않습니다. View와 ViewModel은 동일한 namespace에 있고, Model은 다른 폴더에 넣어둔 상태인데, 혹시 namespace가 많이 다르면 접근이 안 되는걸까요?
