question

KeithCrotty-5608 avatar image
0 Votes"
KeithCrotty-5608 asked AryaDing-MSFT commented

C# UWP : how to change the scale of an Buttons image in code behind

I have 5 buttons using a round image. One of these has its scale set to 2X so that it is wider. When I click on any button, I want to Make it wide, and reset all the others back to 1X.

The xaml for a button level 1 is

             <Button x:Name="BtnSoundL1" Width="20" Height="20" 
                     BorderBrush="white"  BorderThickness="1" 
                     Grid.Column="1"
                     PointerEntered = "BtnSoundL1_PointerEntered"
                     PointerExited    = "BtnSoundL1_PointerExited"
                     Click = "BtnSoundL1_Click"
                     ToolTipService.ToolTip="Sound Level 1">
                 <Button.Template>
                     <ControlTemplate>
                         <Image Source="Assets/Images/Play/EggMonster.png" >
                             <Image.RenderTransform>
                                 <CompositeTransform ScaleX="1" ScaleY="1"/>
                             </Image.RenderTransform>
                         </Image>
                     </ControlTemplate>
                 </Button.Template>
             </Button>

then in the code behind

 private void BtnSoundL5_Click(object sender, RoutedEventArgs e)
 {
     intSoundLevel = 5;  // this is a global that I use the change the volume
     //Now I want to set the ScaleX  to 2 on the image, but I have been unable
     //to determine how to reference the ScaleX value
 }

Alternatively, I can make a new image and change its source, but I will still have the same problem of how to reference the Source to make the update. Changing the scale seems to be easier.

windows-uwp
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AryaDing-MSFT avatar image
0 Votes"
AryaDing-MSFT answered AryaDing-MSFT commented

Hi,

Welcome to Microsoft Q&A!

First, you need to place these five buttons in a layout panel, the layout panel in the following sample is a StackPanel named myStackPanel. Second, you could register all button click event in MainPage constructor. Third, you could use the Visual Tree to find the image inside the clicked button, then you could use image.RenderTransform = new CompositeTransform() {ScaleX=2 } to change the scaleX of image.

What is the most important is that you need to record the previous clicked button, so that you could set its image scaleX from 2 to 1 when you click another button.

Please refer to the following code.

  public sealed partial class MainPage : Page
  {
      
    public  Button oldClickButton = null;
     public MainPage()
     {
         this.InitializeComponent();
            
         foreach (var control in myStackPanel.Children)
         {
             if(control is Button)
             {
                 var button = control as Button;
                 button.Click += Button_Click;
             }
         }
     }

     private void Button_Click(object sender, RoutedEventArgs e)
     {
         if (oldClickButton != null)
         {
             Image imageold = FindChild<Image>(oldClickButton);
             imageold.RenderTransform = new CompositeTransform() { ScaleX = 1 };
         }
         Button btn = sender as Button;    
         Image image = FindChild<Image>(btn);
         image.RenderTransform = new CompositeTransform() {ScaleX=2 };
         oldClickButton = btn;
     }

     public T FindChild<T>(DependencyObject parent)
     {
         for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
         {
             var child = VisualTreeHelper.GetChild(parent, i);
             if (child is T typedChild)
             {                  
                     return typedChild;

             }
             var inner = FindChild<T>(child);
             if (inner != null)
             {
                 return inner;
             }
         }
         return default;
     }
       
 }


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Arya
I do not like responding here because it has NOTHING to do with the topic.

I I have been trying to submit a Question and I cannot because I seem to be unable to add a tag. I cant even do a feed back.

Obviously, I have submitted tickets before. Do you have a suggestion?

All I can get is a button starting with an x. So, its an invalid tag and wont Post.

0 Votes 0 ·

@KeithCrotty-5608 Is it a custom tag? The Q&A forum can't allow users to create new tags.

0 Votes 0 ·
KeithCrotty-5608 avatar image
0 Votes"
KeithCrotty-5608 answered

AryaDing: Thank you. You gave me what I needed. I am going to mark your comment as the answer. It is probably more valuable in the broader sense.

I probably did not describe the situation well enough.

All I really needed was this one line of code example. I think I was incorrectly looking for just Transform instead of RenderTransform and CompositeTransform.

  BtnSoundL1.RenderTransform = new CompositeTransform() { ScaleX = 1 };
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.