Question

使用Silverlight 4，

我正在尝试创建TextBlock，就像Microsoft LightSwitch（模态窗口选择器）上的那样。所以我可以在GridView列中使用它作为customControl。

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

商业标签上的

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

基本上，当鼠标移动到Business文本块时，按钮将出现在右侧的内部。当鼠标移动到Business文本块之外时，按钮将消失。如果我点击商业文本框，则会出现一个弹出窗口。它内部的按钮也是一样的。弹出窗口将显示一个值列表供我选择。点击其中一个值＆amp;关闭弹出窗口，然后Business TextBox将从弹出窗口中显示所选项的值。

实施：

我不确定它是否应该是包含具有一些条件动画的Button的Textblock，以使按钮出现在文本块内部。但是，我认为我应该做一个矩形的形状然后使它成为一个按钮。然后将一个Textblock和Button放在contentTemplate中。只有当鼠标移动到矩形时才会出现该按钮。

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

任何帮助将不胜感激

谢谢

Answer 1

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

如果您想引入额外的控件，请使用自定义控件代替TextBlock（不要在TextBlock中添加按钮）。

创建自定义用户控件。
在其创建的标准LayoutRoot网格中为其添加TextBlock和Button。
编辑设置，以便最初隐藏按钮。 e.g。不透明度= 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);
            }
        }
    }
}

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

1 个答案: