WPF problem modify style of images in multiple Button Templates
- by user556415
I'm trying to create a control panel for a video camera, the panel has buttons for up, down, left and right etc. Each camera function up, down, left and right is represented by three images (see code below) for the left side, middle and right side. The control panel is circular so the corner images kind of overlap (its complicated to explain this without a visual). When I click on up for example I have to hide the initial three images (leftside, middle and right side) and display another three images for left , middle and right that indicate that the button is pressed. I am achieving this by having a grid inside a button template. The problem I have is that for the corner images for the control there are really four images that represent this. For example for the top left corner the four images would be represent 1. Top not clicked. 2. Top Clicked and 3. Left Not clicked and 4. Left Clicked. My problem is if I need to make the images contained within the Top button have precedence when the top control is clicked or the images in the left button have precedence when the left button is clicked. So it's like I want to modify the left button's image visible property when the top button is clicked and vise versa. This is really difficult to explain so I apologize if it makes little sense but I can email the source code on request if anyone is interested in my predicament.
<Grid>
<Canvas>
<!--<StackPanel>-->
<Button Name="TopSide" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="34" Width="102"
Canvas.Left="97" Canvas.Top="60" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="100">
<Canvas>
<Image Name="TopRightNormal" Source="Resources/topright_off.jpg" Height="34" Width="34" Canvas.Left="66"></Image>
<Image Name="TopRightDown" Source="Resources/topright_down.jpg" Height="34" Width="34" Canvas.Left="66" Visibility="Hidden" ></Image>
<Image Name="TopNormal" Source="Resources/topcenter_off.jpg" Height="34" Width="34" Canvas.Left="34" />
<Image Name="TopPressed" Source="Resources/topcenter_down.jpg" Height="34" Width="34" Canvas.Left="34" Visibility="Hidden" />
<Image Name="TopDisabled" Source="Resources/topcenter_off.jpg" Height="34" Width="34" Canvas.Left="34" Visibility="Hidden" />
<Image Name="TopLeftNormal" Source="Resources/topleft_off.jpg" Height="34" Width="34" Canvas.Left="2" ></Image>
<Image Name="TopLeftDown" Opacity="0" Source="Resources/topleft_down.jpg" Height="34" Width="34" Canvas.Left="2" Visibility="Hidden" ></Image>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="TopNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopPressed" Property="Visibility" Value="Visible" />
<Setter TargetName="TopRightNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopRightDown" Property="Visibility" Value="Visible" />
<Setter TargetName="TopLeftNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopLeftDown" Property="Visibility" Value="Visible" />
<Setter TargetName="TopLeftDown" Property="Opacity" Value="100" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="TopNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopDisabled" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<!--</StackPanel>-->
<!--<StackPanel>-->
<Button Name="LeftSide" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Canvas.Left="100" Canvas.Top="60" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseDown="Button_MouseDown_1">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="34" Height="100">
<Canvas>
<Image Name="TopLeftNormal" Source="Resources/topleft_off.jpg" Height="34" Width="34" Canvas.Left="0"></Image>
<Image Name="TopLeftDown" Opacity="0" Source="Resources/topleft_leftdown.jpg" Height="34" Width="34" Canvas.Left="0" Visibility="Hidden" ></Image>
<Image Name="Normal" Source="Resources/leftcenter_off.jpg" Height="34" Width="34" Canvas.Top="32" Canvas.Left="0"/>
<Image Name="Pressed" Source="Resources/leftcenter_down.jpg" Visibility="Hidden" Canvas.Top="32" Height="34" Width="34" />
<Image Name="Disabled" Source="Resources/leftcenter_off.jpg" Visibility="Hidden" Height="34" Width="34" Canvas.Top="32" />
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Pressed" Property="Visibility" Value="Visible" />
<Setter TargetName="TopLeftNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="TopLeftNormal" Property="Opacity" Value="0" />
<Setter TargetName="TopLeftDown" Property="Visibility" Value="Visible" />
<Setter TargetName="TopLeftDown" Property="Opacity" Value="100" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Disabled" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<!--</StackPanel>-->
<!--<StackPanel>-->
<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="34" Width="34"
Canvas.Left="165" Canvas.Top="92" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseDown="Button_MouseDown_2" >
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="Normal" Source="Resources/rightcenter_off.jpg" />
<Image Name="Pressed" Source="Resources/rightcenter_down.jpg" Visibility="Hidden" />
<Image Name="Disabled" Source="Resources/rightcenter_off.jpg" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Pressed" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
<Setter TargetName="Disabled" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<!--</StackPanel>-->
<!--<StackPanel>-->
<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="34" Width="34"
Canvas.Left="133" Canvas.Top="124" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="BottomNormal" Source="Resources/bottomcenter_off.jpg" />
<Image Name="BottomPressed" Source="Resources/bottomcenter_down.jpg" Visibility="Hidden" />
<Image Name="BottomDisabled" Source="Resources/bottomcenter_off.jpg" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BottomNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="BottomPressed" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="BottomNormal" Property="Visibility" Value="Hidden" />
<Setter TargetName="BottomDisabled" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<!--</StackPanel>-->
<Image Source="Resources/bottomright_off.jpg" Height="34" Width="34" Canvas.Left="165" Canvas.Top="124"></Image>
<Image Source="Resources/bottomleft_off.jpg" Height="34" Width="34" Canvas.Left="100" Canvas.Top="124"></Image>
<!--<ToggleButton Style="{StaticResource MyToggleButtonStyle}" Height="34" Width="34" Margin="150,100"/>-->
</Canvas>
</Grid>
