Question

<Grid x:Name="LayoutRoot">
    <Button x:Name="btn_num" Width="51"  Margin="318.849,158,262.15,0" Height="45" VerticalAlignment="Top" d:LayoutOverrides="HorizontalMargin">
        <Grid Height="38.166" Width="44.833">
            <Label x:Name="lbl_2" Content="2" Margin="4.483,-2.042,7,-1.626" FontSize="11.333"/>
            <Label x:Name="lbl_1" Content="1" Margin="4.483,0,7,-19.251" FontSize="11.333" Height="41.834" VerticalAlignment="Bottom"/>
            <Label x:Name="lbl_3" Content="3" Margin="0,8.083,-15,-11.751" FontSize="11.333" HorizontalAlignment="Right" Width="33.35" Foreground="Black"/>
        </Grid>
    </Button>
    <Button x:Name="btn_a" Content="A" HorizontalAlignment="Left" Margin="225.333,158,0,0" Width="55" Foreground="Black" Height="45" VerticalAlignment="Top" Click="btn_alt_Click" />
</Grid>

It’s design will be like this

public partial class button : Window
{
    static int _AClick = 0;
    public button()
    {
        this.InitializeComponent();     
    }

    private void btn_alt_Click(object sender, RoutedEventArgs e)
    {
        if (_AClick == 0)
        {
            _AClick = 1;
            Fill();
        }
        else
        {
            btn_num.Content = "";
            _AClick = 0;
        }
    }

    public void Fill()
    {
        btn_num.Content = "3";
    }
}

The result after window loaded

If i click A button first time. The result will be like this

If I click A button second time. The result will be like this

when I click A button second time. I need the result like below. what should I do for that.

Answer 1

There are a lot of ways available in WPF to achieve this. One way to do this is to have two ControlTemplates (one having all three numbers and other having just one number) and then set the template of your button in code –

<Grid x:Name="LayoutRoot">  
    <Grid.Resources>
        <ControlTemplate
            x:Key="threeNumberTemplate"
            TargetType="{x:Type Button}">
            <Grid Height="38.166" Width="44.833"> 
                <Label x:Name="lbl_2" Content="2" Margin="4.483,-2.042,7,-1.626" FontSize="11.333"/> 
                <Label x:Name="lbl_1" Content="1" Margin="4.483,0,7,-19.251" FontSize="11.333" Height="41.834" VerticalAlignment="Bottom"/> 
                <Label x:Name="lbl_3" Content="3" Margin="0,8.083,-15,-11.751" FontSize="11.333" HorizontalAlignment="Right" Width="33.35" Foreground="Black"/> 
            </Grid> 
        </ControlTemplate>

        <ControlTemplate
            x:Key="oneNumberTemplate"
            TargetType="{x:Type Button}">
                <Label x:Name="lbl_3" Content="3" FontSize="11.333"/> 
        </ControlTemplate>
    </Grid.Resources>

    <Button x:Name="btn_num" Width="51"  Margin="318.849,158,262.15,0" Height="45" VerticalAlignment="Top" Template="{StaticResource threeNumberTemplate}"></Button>  
    <Button x:Name="btn_a" Content="A" HorizontalAlignment="Left" Margin="225.333,158,0,0" Width="55" Foreground="Black" Height="45" VerticalAlignment="Top" Click="btn_alt_Click" />  
</Grid>  

Code behind –

private void btn_alt_Click(object sender, RoutedEventArgs e)
{
    if (_AClick == 0)
    {
        _AClick = 1;
        btn_num.Template = FindResource("oneNumberTemplate") as ControlTemplate;
    }
    else
    {
        btn_num.Template = FindResource("threeNumberTemplate") as ControlTemplate;
        _AClick = 0;
    }
}  

Same can be achieved through triggers by making _AClick as DependecyProperty and using it’s value to swap templates in triggers.

Another approach is to have two Buttons and hide/show them based on the _AClick value in code.