向WPF用户控件添加标签

Question

那就是图像。 所有标签都挤在了Canvas的左侧。我使用Windows 7的一些示例代码来让应用程序处理图像。 我想做的是在图像底部添加一个标签。 该程序可以即时生成图像。

这是代表Picture用户控件的XAML：

    <UserControl x:Class="DocumentHandlingTouch.Picture"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
    <Image Source="{Binding Path=ImagePath}" Stretch="Fill" Width="Auto" Height="Auto" RenderTransformOrigin="0.5, 0.5">
    <Image.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="{Binding Path=Angle}"></RotateTransform>
            <ScaleTransform ScaleX="{Binding Path=ScaleX}" ScaleY="{Binding Path=ScaleY}"></ScaleTransform>
            <TranslateTransform X="{Binding Path=X}" Y="{Binding Path=Y}"/>
        </TransformGroup>
    </Image.RenderTransform>
</Image>
<Label VerticalAlignment="Bottom" x:Name="thelabel"/>

这是图片控件的一部分：

 public partial class Picture : UserControl
{
    public Label label;
    public Picture()
    {
        InitializeComponent();
        DataContext = this;
        label = new Label();
    }

    public string ImagePath
    {
        get { return (string)GetValue(ImagePathProperty); }
        set { SetValue(ImagePathProperty, value); }
    }
}

这是创建图片的代码：

 Picture p = new Picture();
 p.ImagePath = path.ToString();
 p.label.Content = p.ImagePath;

这对我不起作用，因为它并没有真正创建一个可以在上面设置文本的标签。 我要解决这个错误吗？ 我已经在OneDrive（ http://1drv.ms/1zQy3Or ）上发布了代码，以防我不能很好地代表这一点

Answer 1

如@Ganesh所述，最好绑定到字符串。

只是敲了些可能有帮助的东西。 有很多方法可以进行绑定，但这肯定行得通。

XML格式

    <Window x:Class="WPF.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window2" Height="300" Width="300"
        x:Name="ViewRoot">
    <Grid>
      <!-- Do image stuff here.-->
      <!-- Put label in appropriate position -->
    <Label Content="{Binding ElementName=ViewRoot, Path=MyLabel}"></Label>
  </Grid>
</Window>

和背后的代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WPF
{
    /// <summary>
    /// Interaction logic for Window2.xaml
    /// </summary>
    public partial class Window2 : Window
    {
        public Window2()
        {
            InitializeComponent();
            this.MyLabel = "Hello";
        }



        public string MyLabel
        {
            get { return (string)GetValue(MyLabelProperty); }
            set { SetValue(MyLabelProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MyLabel.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MyLabelProperty =
            DependencyProperty.Register("MyLabel", typeof(string), typeof(Window2), new PropertyMetadata(""));



    }
}

希望这可以帮助

Answer 2

每当我在UserControl中看到DataContext = xxxx时，脑海中就会响起警钟。 请不要这样做。 WPF / XAML的最大好处之一就是独立的UI和数据层，通过这样做，您将在组件上强制使用特定的仅UI数据层，这在将来似乎总是会引起问题 ，因为现在您不能与您的UserControl一起使用其他任何数据。

但是我怀疑您没有在UI上看到标签，因为您实际上没有将其添加到UI的任何地方。

例如，这里有一些XAML，它将TextBlock和Image都放置在面板内。

<StackPanel>
    <Image Source="{Binding ImagePath}" />
    <TextBlock Text="{Binding ImagePath}" />
</StackPanel>

如果您确实需要，也可以通过后面的代码来创建它。

至于绑定，您是否真的需要为此自定义UserControl？ 看起来，模板也很适合。

<ItemsControl ItemsSource="{Binding MyCollectionOfStrings}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Image Source="{Binding }" />
                <TextBlock Text="{Binding }" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

如果您确实需要UserControl，则可以为ImagePath创建字符串类型的DependencyProperty，并将其绑定到Image和Label属性。

<UserControl x:Class="MyNamespace.MyPictureControl"
             x:Name="PictureControl">
    <StackPanel>
        <Image Source="{Binding ImagePath, ElementName=PictureControl}" />
        <TextBlock Text="{Binding ImagePath, ElementName=PictureControl}" />
    </StackPanel>
</UserControl>

public partial class MyPictureControl : UserControl
{
    public MyPictureControl()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty ImagePathProperty =
        DependencyProperty.Register("ImagePath", typeof(string), typeof(MyPictureControl), new PropertyMetadata(null));

    public string ImagePath
    {
        get { return (string)GetValue(ImagePathProperty); }
        set { SetValue(ImagePathProperty, value); }
    }
}

然后，任何想要使用此控件的地方都可以设置或绑定ImagePath属性

<local:MyImageControl ImagePath="C:\someImage.jpg" />
<local:MyImagecontrol ImagePath="{Binding SomeString}" />

Answer 3

我试图创建一个用户控件。 请参考下面的代码。

<UserControl x:Class="DatagridRow_Learning.Picture"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
    <Image x:Name="image"/>
    <TextBlock x:Name="imageName"/>
</StackPanel>

public partial class Picture : UserControl
{
    public Picture()
    {
        InitializeComponent();            
    }

    public string ImagePath
    {
        get { return (string)GetValue(ImagePathProperty); }
        set { SetValue(ImagePathProperty, value); }
    }

    public static readonly DependencyProperty ImagePathProperty =
        DependencyProperty.Register("ImagePath", typeof(string), typeof(Picture), new PropertyMetadata(string.Empty, new PropertyChangedCallback(ImagePathCallBack)));

    private static void ImagePathCallBack(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        Picture pic = obj as Picture;
        pic.image.Source= new BitmapImage(new Uri((string)args.NewValue));
    }

    public string ImageLabel
    {
        get { return (string)GetValue(ImageLabelProperty); }
        set { SetValue(ImageLabelProperty, value); }
    }

    public static readonly DependencyProperty ImageLabelProperty =
        DependencyProperty.Register("ImageLabel", typeof(string), typeof(Picture), new PropertyMetadata(string.Empty,new PropertyChangedCallback( ImageLabelCallBack)));

    private static void ImageLabelCallBack(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        Picture pic = obj as Picture;
        pic.imageName.Text= (string)args.NewValue;
    }        
}