如何使用依赖项属性将图像传递给UserControl中的按钮

Question

I have created an UserControl. It has a Button and a textblock. I want to pass an Image to that Button using Dependency property. But when I try to call that usercontrol in some other page, its showing some error. This is my code..

User Control.xaml:

<UserControl x:Class="....UserControl"
         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" >
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Border Grid.Row="0"
        Name="borMain"
        Style="{StaticResource ButtonImageTextBorderStyle}"
        MouseEnter="borMain_MouseEnter"
        MouseLeave="borMain_MouseLeave"
        PreviewMouseLeftButtonDown="borMain_MouseLeftButtonDown" >
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="MouseStates">
                <VisualState Name="MouseEnter">
                    <Storyboard>
                        <ColorAnimation To="Black"
                          Duration="0:0:00.1"
                          Storyboard.TargetName="borMain"
                          Storyboard.TargetProperty="BorderBrush.Color" />
                        <ColorAnimation To="Black"
                          Duration="0:0:00.1"
                          Storyboard.TargetName="borMain"
                          Storyboard.TargetProperty="Background.Color" />
                        <ThicknessAnimation To="4,1,4,4"
                              Duration="0:0:00.1"
                              Storyboard.TargetName="borMain"
                              Storyboard.TargetProperty="Margin" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="MouseLeave" />
                <VisualStateGroup.Transitions>
                    <VisualTransition To="MouseLeave" />
                    <VisualTransition To="MouseEnter" />
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Button Content="{Binding Path=AppBarContent}"                  
         Style="{StaticResource ButtonImageTextImageStyle}" />
    </Border>

    <TextBlock Grid.Row="1"
           Name="tbText"
           Style="{StaticResource ButtonImageTextTextBlockStyle}"
           Text="{Binding Path=Text}" />
   </Grid>
</UserControl>

UserControl.xaml.cs:

 [DefaultEvent("Click")]
   public partial class SystemUnitUserControl : UserControl
   {
      public UserControl()
      {
        InitializeComponent();
        this.DataContext = this;
      }
    #region Text Property
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set
        {
            SetValue(TextProperty, value);
            if (string.IsNullOrEmpty(value))
                tbText.Visibility = Visibility.Collapsed;
        }
    }


    #region AppBarContent Property
    public Image AppBarContent
    {
        get { return (Image)GetValue(AppBarContentProperty); }
        set { SetValue(AppBarContentProperty, value); }
    }

      public static readonly DependencyProperty AppBarContentProperty =
        DependencyProperty.Register("AppBarContent", typeof(Image),  typeof(SystemUnitUserControl), null);
    #endregion

    #region MouseLeftDown Event
    private void borMain_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        RaiseClick(e);
    }
    #endregion

    #region Click Event Procedure
    public delegate void ClickEventHandler(object sender, RoutedEventArgs e);
    public event ClickEventHandler Click;

    protected void RaiseClick(RoutedEventArgs e)
    {
        if (null != Click)
            Click(this, e);
    }
    #endregion

    #region Visual State Animations
    private void borMain_MouseEnter(object sender, MouseEventArgs e)
    {
        VisualStateManager.GoToElementState(borMain, "MouseEnter", true);
    }

    private void borMain_MouseLeave(object sender, MouseEventArgs e)
    {
        VisualStateManager.GoToElementState(borMain, "MouseLeave", true);
    }
    #endregion

I am calling this Usercontrol in other page.

Window1.xaml:

...
 xmlns:my="clr-namespace:....UserControls"
...

         <my:UserControl x:Name="actionRectDuct"   
                         AppBarContent="F:\..\..\Assets\offline.jpg"
                         Text="Button 1" />                         

Its not going into that page. Its showing the following error..

A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll

Additional information: 'Set property 'UnitUserControl.AppBarContent' threw an exception.' Line number '38' and line position '41'.

I want to pass image on the AppBarContent.. how can i do this??

Answer 1

here is how you can do the same with your code

     <my:UserControl x:Name="actionRectDuct"
                     Text="Button 1" >   
         <my:UserControl.AppBarContent>
             <Image Source="F:\..\..\Assets\offline.jpg" />
         </my:UserControl.AppBarContent>
     </my:UserControl>

instead of passing an string to the AppBarContent property which accepts an Image, we'll now pass the an instance of Image having the source as the desired file. so as long as the source is correct you'll be able to get the desired image in SystemUnitUserControl