Topic: WPF User Control Help needed

[Jeff_M]

I have a Windows Forms UserControl which I am converting to WPF. It works just fine to start, but I need to have the button images change depending on the toggle state. I thought it would be simple to create a UserControl with a ToggleButton containing an Image. I then changed the UserControl with the burttosn so that the first button would use the ImageToggleButton. All appears to work, except the image never displays in either checked state.
Here is the XAML for the  top usercontrol:

Code - XML: [Select]

1.         <controls:ImageToggleButton x:Name="b_LayerFreezeThaw" Grid.Column="0" Margin="5"
2.                                    CheckedImage ="{StaticResource LayerFrozen}"
3.                                    UncheckedImage ="{StaticResource LayerThawed}"
4.                                    Style="{StaticResource SquareButton}" />
5.         <!--<Button x:Name="b_LayerFreezeThaw" Grid.Column="0" Margin="5" Content="{StaticResource LayerThawed}" Click="b_LayerFreezeThaw_Click"  Background="{x:Null}"/>-->
6.         <Button x:Name="b_LayerOnOff" Grid.Column="1" Margin="5" Content="{StaticResource LayerOn}" Click="b_LayerOnOff_Click"  Background="{x:Null}"/>
7.         <Button x:Name="b_LayerLockUnlock" Grid.Column="2" Margin="5" Content="{StaticResource LayerUnLocked}" Click="b_LayerLockUnlock_Click"  Background="{x:Null}"/>
8.         <Button x:Name="b_LayerPlot" Grid.Column="3" Margin="5" Content="{StaticResource LayerPlotOn}" Click="b_LayerPlot_Click"  Background="{x:Null}"/>
9.         <Button x:Name="b_LayerNewVP" Grid.Column="4" Margin="5" Content="{StaticResource NewVPThawed}" Click="b_LayerNewVP_Click"  Background="{x:Null}"/>
10.  

And the XAML for the ImageTogglebutton:

Code - XML: [Select]

1.         <ToggleButton x:Name="ToggleBtn" Background="Transparent" Checked="ToggleBtn_Checked" Unchecked="ToggleBtn_Unchecked">
2.             <Image x:Name='ButtonImage'/>
3.         </ToggleButton>
4.  

And now the codebehind for the toggle:

Code - C#: [Select]

1.     public partial class ImageToggleButton : UserControl
2.     {
3.         public ImageToggleButton()
4.         {
5.             InitializeComponent();
6.             DataContext = this;
7.         }
8.  
9.         /// <summary>  
10.         /// Set image to show on checked.  
11.         /// </summary>  
12.         public Image CheckedImage
13.         {
14.             get
15.             {
16.                 return (Image)GetValue( CheckedImageProperty);
17.             }
18.             set
19.             {
20.                SetValue( CheckedImageProperty, value);
21.             }
22.         }
23.          static readonly DependencyProperty CheckedImageProperty = DependencyProperty.Register("CheckedImage", typeof(Image), typeof(ImageToggleButton), new PropertyMetadata(null));
24.  
25.         /// <summary>  
26.         /// Set image to show on unchecked.  
27.         /// </summary>  
28.         public Image UncheckedImage
29.         {
30.             get
31.             {
32.                 return (Image)GetValue(UncheckedImageProperty);
33.             }
34.             set
35.             {
36.                 SetValue(UncheckedImageProperty, value);
37.             }
38.         }
39.          static readonly DependencyProperty UncheckedImageProperty = DependencyProperty.Register("UncheckedImage", typeof(Image), typeof(ImageToggleButton), new PropertyMetadata(null));
40.  
41.         private void ToggleBtn_Checked(object sender, RoutedEventArgs e)
42.         {
43.            ButtonImage = CheckedImage;
44.         }
45.  
46.         private void ToggleBtn_Unchecked(object sender, RoutedEventArgs e)
47.         {
48.             ButtonImage = UncheckedImage;
49.         }
50.     }
51.  

When debugging everything seems to be functioning except that the Images which are supposed to be passed as the UnserControl properties are never set. They are specifically set in the UserControl containing the Toggle UC but the Set function is not hit when the window is initiated.

Suggestions on how to correct this most welcome.

[kdub_nz]

Hi Jeff,

Sorry, without a lot of research I'm unable to help.
 . . . and strapped for spare time at the moment.

Hope you get it resolved and let us know the answer

Regards,

[jtoverka]

ButtonImage is the XAML variable name of class Image. I don't think you can just assign values directly to that variable. You should try something like

untested code:

Code: [Select]

ButtonImage.Source = CheckedImage.Source
ButtonImage.Source = UncheckedImage.Source


[Jeff_M]

@jtoverka Bingo! That does get the images to display when clicked. Now the only issue remaining is that no image is displayed when the window loads. Off to tackle that now.
Thank you!