创建具有居中文本和动画边框的按钮内容

发布于 2024-12-09 02:24:34 字数 1035 浏览 0 评论 0原文

以下 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 代码提供答案，我将不胜感激。

原文

The following XAML code creates a button with a border as its content. The border has a TextBlock as it's child. When you CLICK on the button, the border width gradually grows.
Since the text block is inside the border it is not seen until you click the button.
Now my requirements are:
There should be a text displayed on the button even before you click it.
Even after you click the button, only the border should animate while the button text remains in its center position.

<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>

I will appreciate if anyone is able to provide answers with working XAML code.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巴黎夜雨 2024-12-16 02:24:34

我仅稍微修改了您的 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 的内容，您可以使用包含 Border 和 Grid 的 Grid >文本块。由于未指定列或行，因此 TextBlock 和 Border 将绘制在彼此之上。在这种 Border 没有内容的情况下，我更喜欢使用 Rectangle 因为它更轻一些。希望这有帮助！

I've modified your XAML only slightly:

<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>

For the Button's content, you could use a Grid which contains your Border and the TextBlock. Since no columns or rows are specified, the TextBlock and the Border are drawn on top of each other. It situations like this where the Border does not have content, I prefer to use a Rectangle instead since it is bit lighter. Hope this helps!