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

Question

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.

Answer 1

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.

Answer 2

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