положить кнопку внутри TextBlock (или, может быть, что-то еще), чтобы он работал, как на видео? - PullRequest
Новая
       36

положить кнопку внутри TextBlock (или, может быть, что-то еще), чтобы он работал, как на видео?

0 голосов
/ 15 сентября 2010

с Silverlight 4,

Я пытаюсь создать TextBlock точно так же, как на Microsoft LightSwitch (модальное окно выбора). Так что я могу использовать его как customControl внутри столбцов GridView.

это ссылка с YouTube: вы можете увидеть ту, о которой я говорю, начиная с 08:54 / 14.50

на ярлыке Бизнес

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

Как правило, когда мышь перемещается к текстовому блоку Business, кнопка появляется внутри него с правой стороны. Когда мышь выходит за пределы текстового блока Business, кнопка исчезает. Если я нажму на текстовое поле «Бизнес», появится всплывающее окно. То же самое для кнопки внутри него. Во всплывающем окне будет показан список значений, которые я могу выбрать. После нажатия на одно из этих значений и закрытия всплывающего окна, Business TextBox покажет значение выбранного значения во всплывающем окне.

Для реализации:

Я не уверен, должен ли это быть текстовый блок, содержащий кнопку с некоторой условной анимацией, чтобы кнопка появлялась внутри текстового блока или нет. Тем не менее, я думаю, что я должен был сделать прямоугольную форму, а затем сделать ее кнопкой. Затем помещает текстовый блок и кнопку внутри шаблона содержимого. Кнопка появляется только тогда, когда мышь перемещается в прямоугольник.

Я действительно не знаю, как заставить анимацию работать на кнопку, когда мышь перемещается к прямоугольнику и исчезает, когда она выходит из нее, потому что это будет включать как анимацию, так и шаблон управления. Или мой подход правильный или нет

Любая помощь будет оценена

спасибо

1 Ответ

1 голос
/ 15 сентября 2010

Если бы вы меняли атрибуты одного элемента управления, я бы сказал, создайте повторно используемое Поведение и присоедините его к элементу управления TextBlock.

Поскольку вы хотите ввести дополнительный элемент управления, используйтепользовательский элемент управления вместо вашего TextBlock (не добавляйте кнопку в TextBlock).

  • Создайте пользовательский элемент управления.
  • Добавьте к нему TextBlock и Button внутри стандартной сетки LayoutRootон создает.
  • Измените настройки так, чтобы кнопка была изначально скрыта. например, Непрозрачность = 0
  • Предоставить TextBlock Text как свойство зависимости, чтобы обеспечить нормальную привязку к содержимому.
  • Предоставить щелчок кнопки как событие, чтобы позволить внешним пользователям верхпоймать событие
  • Добавить раскадровки ShowButton и HideButton, чтобы показать и скрыть кнопку.Сделайте это, изменив значение непрозрачности.Если кнопка полностью прозрачна, вы не можете нажать на нее.

Если вам нужна конкретная помощь по выполнению любого из этих шагов, просто спросите.Вы также можете связаться с нами через наш веб-сайт.

* Примечание. Использование Expression Blend для этого типа работ в 100 раз проще, чем в VS 2010. Слишком много программистов игнорируют 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);
            }
        }
    }
}
...