Создание содержимого кнопки с центрированным текстом и анимированной рамкой

Question

Следующий код XAML создает кнопку с рамкой в ​​качестве содержимого. Граница имеет TextBlock как дочерний элемент. Когда вы нажимаете кнопку, ширина границы постепенно увеличивается. Поскольку текстовый блок находится внутри границы, он не виден, пока вы не нажмете кнопку.
Теперь мои требования: На кнопке должен отображаться текст еще до того, как вы нажмете на нее. Даже после того, как вы нажмете кнопку, анимация должна выполняться только в том случае, если текст кнопки остается в ее центральной позиции.

<Button Name="button5" Width="100" Margin="10" HorizontalContentAlignment="Left">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="myBorder" Storyboard.TargetProperty="Width" From="0" To="94" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
<Button.Content>
    <Border Background="Gray" Width="0" Name="myBorder">
        <TextBlock>Search</TextBlock>
    </Border>
</Button.Content>
</Button>

Буду признателен, если кто-нибудь сможет дать ответы с рабочим кодом XAML.

Answer 1

Я немного изменил ваш XAML:

<Button Name="button5" Width="100" Margin="10" HorizontalContentAlignment="Left">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Width" From="0" To="94" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
    <Button.Content>
        <Grid>
            <Rectangle x:Name="myRectangle" Fill="Gray" Width="0" HorizontalAlignment="Left" />
            <TextBlock Text="Search" />
        </Grid>
    </Button.Content>
</Button>

Для содержимого Button вы можете использовать Grid, который содержит ваши Border и TextBlock. Поскольку столбцы или строки не указаны, TextBlock и Border отображаются поверх друг друга. В таких ситуациях, когда Border не имеет содержимого, я предпочитаю использовать Rectangle, поскольку он немного светлее. Надеюсь, это поможет!