C# 如何使此嵌套用户控件显示图像？

我创建了一个

ImageButton

用户控件。我希望另一个用户控件--

TabItem

--使用该

ImageButton

，但是

TabItem

不会显示图像

我需要做什么才能让

TabItem

显示

ImageButton

的图像

这是我的代码：

<!--MainPage.xaml-->
<Page
    x:Class="ButtonTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ButtonTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:buttons="using:ButtonTest" Background="Transparent">

    <StackPanel>

        <!--there is an image displayed for this-->
        <buttons:ImageButton ImageSource="overview_64.png" />

        <!--but not for this-->
        <buttons:TabItem ImageSource="overview_64.png" TabItemText="button text" />        
    </StackPanel>
</Page>

<!--ImageButton.xaml-->
<UserControl
    x:Class="ButtonTest.ImageButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ButtonTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="100"
    d:DesignWidth="100">

    <Button Name="imgButton" Style="{StaticResource imageButton}" />

</UserControl>

public sealed partial class ImageButton : UserControl
{
    public static readonly DependencyProperty ImageProperty = 
        DependencyProperty.Register("ImageSource", typeof(string), typeof(ImageButton), null);

    public ImageButton()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }

    public string ImageSource
    {
        get { return (string)GetValue(ImageProperty); }
        //set { SetValue(ImageProperty, value); }
        set { SetValue(ImageProperty, "/Resources/Images/" + value); }
    }
}

公共密封部分类ImageButton:UserControl
{
公共静态只读从属属性ImageProperty=
DependencyProperty.Register（“ImageSource”、typeof（字符串）、typeof（ImageButton）、null）；
公共图像按钮（）
{
this.InitializeComponent（）；
this.DataContext=this；
}
公共字符串图像源
{
获取{return（string）GetValue（ImageProperty）；}
//set{SetValue（ImageProperty，value）；}
set{SetValue（ImageProperty，“/Resources/Images/”+value）；}
}
}

这是TabItem.xaml，它使用ImageButton。没有为选项卡项显示图像。我是否正确绑定了ImageSource

<!--TabItem.xaml-->
<UserControl x:Class="ButtonTest.TabItem"
        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"
        mc:Ignorable="d"
        xmlns:btn="using:ButtonTest"
        d:DesignHeight="85" d:DesignWidth="80">

    <StackPanel Orientation="{Binding TabOrientation}">
        <!-- TabItem uses ImageButton -->
        <btn:ImageButton ImageSource="{Binding ImageSource}"  />

        <TextBlock Name="txtText" Text="{Binding TabItemText}" />
    </StackPanel>
</UserControl>

public sealed partial class TabItem : UserControl
{
    public static readonly DependencyProperty TextProperty = 
        DependencyProperty.Register("TabItemText", typeof(string), typeof(TabItem), null);
    public static readonly DependencyProperty ImageProperty = 
        DependencyProperty.Register("ImageSource", typeof(string), typeof(TabItem), null);

    public string TabItemText
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public string ImageSource
    {
        get { return (string)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, "/Resources/Images/" + value); }
    }

    public TabItem()
    {
        this.InitializeComponent();

        this.DataContext = this;
    }
}

公共密封部分类TabItem:UserControl
{
公共静态只读DependencyProperty TextProperty=
Register（“TabItemText”、typeof（string）、typeof（TabItem）、null）；
公共静态只读从属属性ImageProperty=
DependencyProperty.Register（“ImageSource”、typeof（string）、typeof（TabItem）、null）；
公共字符串选项卡ItemText
{
获取{return（string）GetValue（TextProperty）；}
set{SetValue（TextProperty，value）；}
}
公共字符串图像源
{
获取{return（string）GetValue（ImageProperty）；}
set{SetValue（ImageProperty，“/Resources/Images/”+value）；}
}
公共选项卡项（）
{
this.InitializeComponent（）；
this.DataContext=this；
}
}

ImageButton使用的样式定义如下：

<!--Image Button Style is defined here-->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HKC.Winterfell.WP81.Resources.Styles.Buttons">

    <Style x:Key="imageButton" TargetType="Button">
        <Setter Property="MinWidth" Value="50"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Border x:Name="border" Background="Transparent" BorderBrush="Transparent" BorderThickness="2" CornerRadius="20">
                            <Grid>
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
                            </Grid>
                        </Border>

                        <Image x:Name="ImgShadow" Source="/Resources/Images/shadow_64.png" Visibility="Visible" Height="67" Width="67" Margin="10,8,0,0" />
                        <Image x:Name="Img" Source="{Binding ImageSource}" Height="64" Width="64" Margin="0,0,0,0"  />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ImgShadow">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="Img">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="10,8,0,0" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

---

我认为从控件内部更改控件的DataContext不是一个好主意。我已经看过几次了，它总是引起一些问题

潜在问题

我想这是你的问题所在。查看选项卡项的xaml中的这一行：

<btn:ImageButton ImageSource="{Binding ImageSource}"  />

到

当然，对TabItem控件也要这样做

结论还是什么…

基本上，更改DataContext是一个坏主意（即使您按照我的建议进行了更改），所以尽量避免使用它

顺便说一句，我可以给你一个没有DC更改的解决方案，但是我现在太忙了，对不起。如果有人这样做，我会投票给他们

编辑-附加观察（与问题无关）

我也不认为塞特是个好主意：

set { SetValue(ImageProperty, "/Resources/Images/" + value); }

---

如果你需要使用资源/图片中没有的图片，你会非常难过。另外，最好将属性的类型更改为ImageSource（这通常用于图像源：）或object。在WinRT中，很多东西都可以转换为ImageSource，因此如果它是object类型，则会更灵活。

@DaveDev你是什么意思？你试过我的建议了吗？它修好了吗？另外，如果你对我说的话有任何疑问，请提问，我有时间会回答你。：）你是说我应该修改TabItem.xaml的

？或者修改ImageButton.xaml的

元素？如果我将

DataContext=“{Binding ImageSource}”

添加到

元素中，它不会显示任何内容。@DaveDev我稍微修改了答案。我希望这有帮助。：）如果没有-我将再次编辑：）宾果。this:

this.imgButton.DataContext=this成功了。我听到了你对“/Resources/Images/”这一点的看法。当我把这一切都正确地联系在一起时，我会调查的。
this.imgButton.DataContext = this;

set { SetValue(ImageProperty, "/Resources/Images/" + value); }