按钮 2 文本过渡

Question

一个 wpf 按钮上可以有 2 个文本吗？

按钮 1

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

我还有一个按钮

按钮2

<Button>Toggle Text</Button>

单击此按钮后，我想更改（切换）第一个按钮上的文本。 WPF 这可能吗？

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

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

        }

Answer 1

你可以同时使用样式和触发器

<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}" />

并且在您的 viewview 模型中，您可以像这样切换值

    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");
    }

点击后

我希望这就是你要找的

Answer 2

XAML代码：

<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# 代码隐藏：

 public MainWindow()
    {
        InitializeComponent();
    }

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

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

在上面的例子中我使用了一个丑陋的按钮，但是你可以把它做得更漂亮。它也不遵循 MVVM 模式。当您准备好将其重构为 MVVM 时，只需使用 Command 而不是 Click 事件，取消 "X:Names" 并从代码中的变量中获取按钮文本。

希望对您有所帮助。

按钮 2 文本过渡

button 2 text transition

wpf

silverlight