Change Image object Visibility

Question

I have some image in my project. I want to change its property Visibility to true when the button pressed. I've created an image

 <Image Name="UserimgRock" Source="Rock.png" HorizontalAlignment="Left" Height="100" Margin="277" VerticalAlignment="Top" Width="100" Visibility="Hidden"/>

and button

private void btnRock_Click(object sender, RoutedEventArgs e)
    {
        
        UserimgRock.Visibility = Visibility.Visible;
    }

but there is an error Error *The name 'UserimgRock' does not exist in the current context. I'm a little confused. Thanks for a any help!

Answer 1

if these both xaml and code behind belongs to same class then just prefix Name with x: where x: is referring to xaml name space, usually in Window tag like xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

eg

<Image x:Name="UserimgRock" Source="Rock.png" HorizontalAlignment="Left" Height="100" Margin="277" VerticalAlignment="Top" Width="100" Visibility="Hidden"/>

if these both are not in the same class then you may not be able to use the event handler for accessing objects in other class as objects are private to the respective class.

Edit

after looking at your code I discovered a few things including the reason why you cannot access the image

first things first, why you cannot access the image object?

reason is, you've defined the image inside a control template which limits the scope of the objects within to the template itself, so they are not accessible outside

how to fix?

you can define the property you need to access in the code behind and bind them to the respective properties in xaml

eg

define a dependency property UserImgRockVisibility in the usercontrol

   public Visibility UserImgRockVisibility
    {
        get { return (Visibility)GetValue(UserImgRockVisibilityProperty); }
        set { SetValue(UserImgRockVisibilityProperty, value); }
    }

    // Using a DependencyProperty as the backing store for UserImgRockVisibility.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty UserImgRockVisibilityProperty =
        DependencyProperty.Register("UserImgRockVisibility", typeof(Visibility), typeof(UserControl1), new PropertyMetadata(Visibility.Hidden));

set the data context to itself in constructor

        DataContext = this;

or in xaml via binding to self

<UserControl x:Class="RockPaper.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"...
         DataContext="{Binding RelativeSource={RelativeSource Self}}">

then use this property to manipulate the visibility

        UserImgRockVisibility = Visibility.Visible;

finally bind this property to visibility of the image in xaml

        <Image x:Name="userimgRock" Visibility="{Binding UserImgRockVisibility}" ... />

name is not necessary if you do not really need it

this is all you need in order to control the property of a object inside a control template or data template

another approach

Since I do not find a significance of using a style and control template within the user control

you can do it by simply removing the style and control template elements and bring the elements to usercontrol

by doing this you may not require the extra properties you may simply access the objects as they will be in the class scope

All I can see that you've used them for mouse over detection, you can use event triggers in elements directly using MouseEnter, MouseLeave kind of events

eg,

<UserControl x:Class="RockPaper.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Button x:Name="btnRock" Opacity=".3" HorizontalAlignment="Left" Margin="44,82.418,0,0" VerticalAlignment="Top" Width="100" Height="100" Click="btnRock_Click">
            <StackPanel>
                <Image />
            </StackPanel>
        </Button>
        <Image x:Name="userimgRock"  Visibility="Hidden" HorizontalAlignment="Left" Height="100" Margin="277.164,228.418,0,0" VerticalAlignment="Top" Width="100" Opacity="1" />
    </Grid>
    <UserControl.Triggers>
        <EventTrigger SourceName="btnRock" RoutedEvent="MouseEnter" >
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation x:Name="enter" To="1" Storyboard.TargetName="btnRock" Storyboard.TargetProperty="Opacity"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger SourceName="btnRock" RoutedEvent="MouseLeave" >
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation To=".3" Storyboard.TargetName="btnRock" Storyboard.TargetProperty="Opacity"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </UserControl.Triggers>
</UserControl>

Note I stripped some of the extra code not necessary for example

then use image object normally as

    userimgRock.Visibility = Visibility.Visible;

now the choice is yours to choose what you prefer. do try both and see what is convenient to you.