1

設定は次のとおりです。数値のテキストボックスがあります。要件に従って、誰かがその値を変更するたびに、付随するコメントを提供する必要があります。したがって、視覚的には、最初のコメントのすぐ隣に表示されるコメント用の別のテキストボックスが必要です。理想的には、コメント テキスト ボックスは、値テキスト ボックスから始まるコールアウトに配置し、この図のようにその下にあるものをオーバーレイして右側に表示する必要があります。ここに画像の説明を入力

CSSとHTMLで簡単に行う方法を知っています。私は今、Silverlightで同じことをしなければなりません。残念ながら、私はあまり得意ではないので、具体的に質問しているのは、XAML とコードをできるだけ少なくして、2 つのテキスト ボックスの 1 つを別のテキスト ボックスの隣に (その下にあるコントロールをオーバーレイして右側に) 表示する方法です。

4

2 に答える 2

0

わかりました、私は自分の行動を書くことになりました

namespace MyNamespace
{
    public class CommentBehavior : Behavior<TextBox>
    {
        private readonly TimeSpan howLongWeWaitBeforePopupCloses = TimeSpan.FromMilliseconds(200);

        private DispatcherTimer popupClosingTimer;
        public static DependencyProperty PopupProperty = DependencyProperty.Register("Popup", typeof(Popup), typeof(CommentBehavior), new PropertyMetadata(null));

        public Popup Popup
        {
            get { return (Popup)this.GetValue(PopupProperty); }
            set { this.SetValue(PopupProperty, value); }
        }

        protected override void OnAttached()
        {
            this.popupClosingTimer = new DispatcherTimer();
            this.popupClosingTimer.Stop();
            this.popupClosingTimer.Interval = howLongWeWaitBeforePopupCloses;
            this.popupClosingTimer.Tick += this.ClosePopup;
            this.AssociatedObject.GotFocus += this.GotFocus;
            this.AssociatedObject.LostFocus += this.LostFocus;
            this.Popup.Child.GotFocus += PopupChild_GotFocus;
            this.Popup.Child.LostFocus += PopupChild_LostFocus;
        }

        private void PopupChild_LostFocus(object sender, RoutedEventArgs e)
        {
            this.popupClosingTimer.Start();
        }

        private void PopupChild_GotFocus(object sender, RoutedEventArgs e)
        {
            this.popupClosingTimer.Stop();
        }

        protected override void OnDetaching()
        {
            this.AssociatedObject.GotFocus -= this.GotFocus;
            this.AssociatedObject.LostFocus -= this.LostFocus;
            this.Popup.GotFocus -= PopupChild_GotFocus;
            this.popupClosingTimer.Tick -= this.ClosePopup;
            this.popupClosingTimer = null;
        }

        private void ClosePopup(object sender, EventArgs e)
        {
            this.Popup.IsOpen = false;
            this.popupClosingTimer.Stop();
        }

        protected void GotFocus(object sender, RoutedEventArgs e)
        {
            this.popupClosingTimer.Stop();
            this.Popup.IsOpen = true;
            var at = this.CalculatePopupPosition();
            this.Popup.HorizontalOffset = at.X;
            this.Popup.VerticalOffset = at.Y;
        }

        private Point CalculatePopupPosition()
        {
            var owner = this.AssociatedObject;
            var transformation = owner.TransformToVisual(Application.Current.RootVisual);
            var at = transformation.Transform(new Point(owner.ActualWidth, 0));
            return at;
        }

        protected void LostFocus(object sender, RoutedEventArgs e)
        {
            this.popupClosingTimer.Start();
        }
    }
}

そして、次の XAML

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Background="Red">
        <TextBox Width="200" Text="0.01">
            <i:Interaction.Behaviors>
                <local:CommentBehavior>
                    <local:CommentBehavior.Popup>
                        <Popup>
                            <TextBox Text="Comment" />
                        </Popup>
                    </local:CommentBehavior.Popup>
                </local:CommentBehavior>
            </i:Interaction.Behaviors>
        </TextBox>
    </StackPanel>

</Grid>

于 2012-11-27T14:46:34.123 に答える
0

を使用ToolTipし、右側に表示されるように配置を設定します。ToolTipXAML では、外観を模倣することを意味する場合でも、外観を自由にテンプレート化できますTextBox。

これが の目的でありToolTip、適切な作業には常に適切なツールを使用する必要があると強く感じています。:)

これが役立つことを願っています。コードサンプルが必要な場合はお知らせください。

編集: 次のコード サンプルを追加しました。

    <TextBox ToolTipService.Placement="Right">
        <ToolTipService.ToolTip>
            <TextBox Text="{Binding CalloutText, Mode=OneWay}" IsReadOnly="True"/>
        </ToolTipService.ToolTip>
    </TextBox>
于 2012-11-26T20:56:41.797 に答える