将 Button 放在 TextBlock（或其他东西）中以使其像视频中的那样工作？

Question

使用 Silverlight 4，

我正在尝试像 Microsoft LightSwitch(Modal Window Picker) 上的那样创建 TextBlock。所以我可以将它用作 GridView 列中的 customControl。

这是来自 youtube 的链接：您可以从 08:54 / 14.50 开始看到我正在谈论的那个

在企业标签上

http://www.youtube.com/watch?v=GVApqFMqRbU

基本上，当鼠标移到业务文本块时，按钮将出现在右侧。当鼠标移出业务文本块时，按钮将消失。如果我单击业务文本框，则会出现一个弹出窗口。里面的按钮也是一样的。弹出窗口将显示一个值列表让我选择。单击其中一个值并关闭弹出窗口后，业务文本框将显示弹出窗口中所选值的值。

实施：

我不确定它是否应该是一个文本块，其中包含带有一些条件动画的按钮，以使按钮出现在文本块内。但是，我认为我应该制作一个矩形然后让它变成一个按钮。然后在 contentTemplate 中放置一个 Textblock 和 Button。该按钮仅在鼠标移到矩形时出现。

我真的不知道如何使动画在鼠标移到矩形时为按钮工作并在离开矩形时消失，因为这将涉及动画和控制模板。或者我的方法是否正确

任何帮助将不胜感激

谢谢

Answer 1

如果您要更改单个控件的属性，我会说创建一个可重用的行为并将其附加到 TextBlock 控件。

由于您想引入额外的控件，请使用自定义控件代替您的 TextBlock（而不是向 TextBlock 添加按钮）。

• 创建自定义用户控件。
• 在它创建的标准 LayoutRoot 网格中添加一个 TextBlock 和 Button。
• 编辑设置，使按钮最初是隐藏的。 例如不透明度=0
• 将 TextBlock Text 公开为依赖属性，以允许正常绑定到内容。
• 将按钮单击显示为事件，以允许外部用户顶部捕捉事件
• 添加 ShowButton 和 HideButton 故事板以显示和隐藏按钮。通过改变不透明度值来做到这一点。如果一个按钮是完全透明的，你就不能点击它。

如果您需要有关如何执行上述任何步骤的具体帮助，请尽管询问。您也可以通过我们的网站与我们联系。

*注意：在这种类型的工作中使用 Expression Blend 比在 VS 2010 中容易 100 倍。太多的程序员忽略了 Blend 作为一种设计工具。值得努力学习。

@Tai：正如您通过电子邮件很好地询问的那样，这是一个完整的用户控件示例，它具有文本的依赖属性和按钮的事件。您可以将其用作指南。我已将其精简到最低限度：

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="SilverlightApplication1.TextButtonControl"
    mc:Ignorable="d"
    d:DesignHeight="20" d:DesignWidth="200">
    <UserControl.Resources>
        <Storyboard x:Name="ShowButtonStoryboard">
            <DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ActionButton" d:IsOptimized="True"/>
        </Storyboard>
        <Storyboard x:Name="HideShowButtonStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ActionButton">
                <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="25"/>
        </Grid.ColumnDefinitions>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseLeave">
                <ei:ControlStoryboardAction Storyboard="{StaticResource HideShowButtonStoryboard}"/>
            </i:EventTrigger>
            <i:EventTrigger EventName="MouseEnter">
                <ei:ControlStoryboardAction Storyboard="{StaticResource ShowButtonStoryboard}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
        <TextBlock x:Name="DisplayTextBlock" TextWrapping="Wrap" Text="TextBlock" d:LayoutOverrides="Height"/>

        <Button x:Name="ActionButton" Content="..." Grid.Column="1" Opacity="0"/>

    </Grid>
</UserControl>

还有代码隐藏：

using System;
using System.Windows;
using System.Windows.Controls;

namespace SilverlightApplication1
{
    public partial class TextButtonControl : UserControl
    {
        public event EventHandler<RoutedEventArgs> ButtonClicked;

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set
            {
                SetValue(TextProperty, value);
                DisplayTextBlock.Text = value;
            }
        }

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text",
                                        typeof(string),
                                        typeof(TextButtonControl),
                                        new PropertyMetadata(string.Empty, new PropertyChangedCallback(OnTextChanged)));

        static void OnTextChanged(object sender, DependencyPropertyChangedEventArgs args)
        {
            // If you need to know about text changes...
        }

        public TextButtonControl()
        {
            InitializeComponent();
            this.ActionButton.Click +=new RoutedEventHandler(ActionButton_Click);
        }

        private void ActionButton_Click(object sender, RoutedEventArgs e)
        {
            if (ButtonClicked != null)
            {
                ButtonClicked(this, e);
            }
        }
    }
}