Display Content of Button When Button was Clicked

Question

<Button Name="Dog" Content="Dog"
 Height="80" FontSize="17" 
 Width="{Binding RelativeSource={RelativeSource Self},Path=Height}"    
 Click="Dog_Click"/>

My question is : how to do it??? Normally the button content was hidden, when i click the button the content "Dog" get visible. Thanks

Answer 1

Here is the pure xaml solution, no any code involved here the picture will be visible while the button is pressed.

<Window x:Class="TriggeredButtonVisibility.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:triggeredButtonVisibility="clr-namespace:TriggeredButtonVisibility"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Style x:Key="ButtonStyleKey" TargetType="Button">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <TextBlock x:Name="ButtonContentTextBlock" Text="Press Me" 
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"></TextBlock>
                        <Image x:Name="ButtonContentPicture" 
                               Source="Resources/Pic.jpg" 
                               Stretch="Fill" Visibility="Collapsed" 
                               Margin="50" IsHitTestVisible="False"/>
                    </Grid>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource  Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsPressed}"  Value="True">
                            <Setter TargetName="ButtonContentTextBlock" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="ButtonContentPicture" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Button Style="{StaticResource ButtonStyleKey}">Press Me</Button>
</Grid></Window>

Use the RelativeSource binding in case you want to bind some DataTemplate inner conntrol property to the parent (button) data context. For Example: {Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=DataContext.DataContextData} .

View model involved MVVM approach picture visibility is managed on the viewmodel level.
1. Xaml:

<Window x:Class="TriggeredButtonVisibility.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:triggeredButtonVisibility="clr-namespace:TriggeredButtonVisibility"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <triggeredButtonVisibility:ButtonLogicViewmodel></triggeredButtonVisibility:ButtonLogicViewmodel>
</Window.DataContext>
<Window.Resources>
    <Style x:Key="ButtonStyleKey" TargetType="Button">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type triggeredButtonVisibility:ButtonLogicViewmodel}">
                    <Grid>
                        <TextBlock x:Name="ButtonContentTextBlock" Text="Press Me" 
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"></TextBlock>
                        <Image x:Name="ButtonContentPicture" 
                               Source="Resources/Pic.jpg" 
                               Stretch="Fill" Visibility="Collapsed" 
                               Margin="50" IsHitTestVisible="False"/>
                    </Grid>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding  WasPressedAtOnse, UpdateSourceTrigger=PropertyChanged}"  Value="True">
                            <Setter TargetName="ButtonContentTextBlock" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="ButtonContentPicture" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <Button Style="{StaticResource ButtonStyleKey}" Command="{Binding PressCommand}" Content="{Binding }"/></Grid></Window>

2. ViewModel code:

    public class ButtonLogicViewmodel:BaseObservableObject
{
    private bool _wasPressedAtOnse;
    private ICommand _pressCommand;

    public ButtonLogicViewmodel()
    {
        WasPressedAtOnse = false;
    }

    public ICommand PressCommand
    {
        get { return _pressCommand ?? (_pressCommand = new RelayCommand(OnPress)); }
    }

    private void OnPress()
    {
        WasPressedAtOnse = !WasPressedAtOnse;
    }

    public bool WasPressedAtOnse
    {
        get { return _wasPressedAtOnse; }
        set
        {
            _wasPressedAtOnse = value;
            OnPropertyChanged();
        }
    }}

regards,

Answer 2

You could set a child control to the Button like:

<Button Name="Dog">
   <Button.Content>
    <!--Add a Grid here or whatever and bind Visibility={Binding Path=..., Mode="TwoWay", UpdateSourceTrigger="PropertyChanged"}-->
   </Button.Content>
</Button>

In your Dog_Click Event simply set the Visibility to Visibility.Visible. Dont forget to set the default to Visibility.Hidden