button 2 text transition

Question

It is possible to have 2 text's on a wpf Button?

Button 1

 <Button>
   <StackPanel Orientation="Vertical">
       <TextBlock FontSize="8" HorizontalAlignment="Right">Secondary</TextBlock>
        <TextBlock>Primary</TextBlock>
   </StackPanel>
</Button>

I have another button

Button2

<Button>Toggle Text</Button>

When this button click's I want to change (toggle) the text on first button. Is this possible with WPF ?

 private void Btn_Click(object sender, RoutedEventArgs e)
        {
            var temp = Primary.Text;

            Primary.Text = Secondary.Text;
            Secondary.Text = temp;

        }

Answer 1

XAML Code:

<Grid>
    <Button x:Name="MainButton" Height="70" Width="213" Click="MainButton_Click" >
        <Grid Height="{Binding ElementName=MainButton, Path=ActualHeight}" Width="{Binding ElementName=MainButton, Path=ActualWidth}">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="2*"/>                    
            </Grid.RowDefinitions>                
            <TextBlock x:Name="TextOne" Grid.Row="0" HorizontalAlignment="Right" Padding="10 0">Primary</TextBlock>
            <TextBlock x:Name="TextTwo" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">Secondary</TextBlock>
        </Grid>            
    </Button>
</Grid>

C# Code-behind:

 public MainWindow()
    {
        InitializeComponent();
    }

    private void MainButton_Click(object sender, RoutedEventArgs e)
    {
        string aux = TextOne.Text;

        TextOne.Text = TextTwo.Text;
        TextTwo.Text = aux;
    }

In the above example i used an ugly button, but its up to you to make it more beautifull. It is also NOT following MVVM pattern. When you feel ready to refactor it to MVVM, just use a Command inspite of the Click event, take off the "X:Names" and take the button texts from variables within your code.

Hope that helps.

Answer 2

you can use style and trigger together

<Button HorizontalAlignment="Left" Height="98" Margin="119,83,0,0" VerticalAlignment="Top" Width="327" x:Name="B">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid Width="300" Height="50">
                                <TextBlock Text="secondary" HorizontalAlignment="Right" VerticalAlignment="Top"/>
                                <TextBlock Text="Primary" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="22" />
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Switch,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Value="true">
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <Grid Width="300" Height="50">
                                        <TextBlock Text="primary" HorizontalAlignment="Right" VerticalAlignment="Top"/>
                                        <TextBlock Text="secondary" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="22" />
                                    </Grid>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>

        </Button.Style>
    </Button>

<Button Content="TestBuuton" HorizontalAlignment="Left" Height="66" Margin="336,330,0,0" VerticalAlignment="Top" Width="222" Command="{Binding TestCommand}" />

and in you viewview model you can switch the value like this

    RelayCommand test;
    public RelayCommand TestCommand
    {
        get
        {
            if (test == null)
            {
                test = new RelayCommand(p => execute(p));
            }
            return test;
        }
    }


void execute(object parameter)
    {
        if (Switch)
        {
            Switch = false;
        }
        else
        {
            Switch = true;
        }
        RaisePropertyChanged("Switch");
    }

after click

i hope this is you are looking for