简体   繁体   中英

Change the size of an image inside border on click in c#

How can I make an image inside button to make it bigger when I click it using Width and Height .

My Button XAML code is this:

<Button x:Name="Input2" Grid.Row="0" MouseEnter="Input2_MouseEnter" MouseLeave="Input2_MouseLeave" Click="Input2_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
            <Button.Template>
                <ControlTemplate>
                    <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                        <Image Source= "C:\input.png"
                           Width="40" 
                           Height="40"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
</Button>

Input2.Height - Change the size of the button, not the image inside it.

My C# code:

private void Input2_Click(object sender, RoutedEventArgs e)
{
    // What to do here?
}

Instead of attaching a Click event handler, better use a Trigger on the Button's IsPressed property:

<Button>
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border>
                <Image x:Name="image" Width="40" Height="40" Source="C:\input.png"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="image" Property="Width" Value="50"/>
                    <Setter TargetName="image" Property="Height" Value="50"/>
                </Trigger> 
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

The simplest solution will be to add x:Name="input2Image" to the Image element, and enlarge the image using that name, like that:

<Button x:Name="Input2" Grid.Row="0" MouseEnter="Input2_MouseEnter" MouseLeave="Input2_MouseLeave" Click="Input2_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
        <Button.Template>
            <ControlTemplate>
                <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <Image x:Name="Input2Image" Source= "C:\input.png"
                       Width="40" 
                       Height="40"/>
                </Border>
            </ControlTemplate>
        </Button.Template>

And:

private void Input2_Click(object sender, RoutedEventArgs e)
{
    this.Input2Image.Height = 80;
    this.Input2Image.Width = 80;
}

This should work, but you might consider start using Bindings and the MVVM pattern, to maximize the power of WPF.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM