Mah Apps Tile动画

Question

我想添加到我的wpf应用程序布局的瓷砖的Live效果。我正在使用MahApps.Metro库作为可视化工具。下面是我在版面上的一个例子-

<Controls:Tile Height="110" Background="#9c6b50" Width="180" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,105,33,0">
    <Controls:Tile.Content>
        <TextBlock Text="Setup Your Savings Account" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Controls:Tile.Content>
</Controls:Tile>

我希望瓷砖的最终产品在这两种文本之间切换：

1. 建立你的储蓄账户
2. 点击这里设置您的储蓄帐户。

Answer 1

通常接受的方法是绑定Text属性。一个绑定应该是这样的：

<TextBlock Text="{Binding Path=TileText}" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/>

这是将TextBlock的值绑定到控件的DataContext上的一个名为TileText的属性。您需要了解DataContext和WPF中的绑定才能理解这一点。

一旦您有了一个具有该属性的类：

public string TileText
{
    get {...}
    set {...}
}

类被设置为Tile控件的DataContext，您可以更改TileText属性的值，它将更改TextBlock的文本。这是MVVM设计的一个简单示例，可以作为理解智能WPF设计实践的良好的第一步。

干杯，埃里克

Answer 2

尝尝这个!

<controls:Tile Height="110" Background="#9c6b50" Width="180" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,105,33,0">
        <controls:Tile.Style>
            <Style TargetType="controls:Tile">
                <Setter Property="Content">
                    <Setter.Value>
                        <TextBlock Text="Setup Your Savings Account" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <TextBlock Text="Click here to Setup Your Savings Account" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </controls:Tile.Style>
    </controls:Tile>