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

本文关键字：显示 显示图 图像 控件 用户 何使此 嵌套 | 更新日期: 2023-09-27 18:19:02

我创建了一个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); }
    }
}

这是TabItem。xaml，使用ImageButton。没有显示TabItem的图像。我是否正确绑定了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;
    }
}

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是一个好主意。我看过几次，总是引起一些问题。

潜在的问题

我想这就是你的问题所在。看看TabItem的xaml: 中的这一行
<btn:ImageButton ImageSource="{Binding ImageSource}"  />

这个绑定将ImageButton的ImageSource属性绑定到ImageButton的DataContext(就像所有的绑定一样——它们绑定到控件的DataContext)。但在构造函数中你把context改成了ImageButton本身，所以这个属性基本上是绑定到它自己的。

容易解决

最简单的修复方法是，不是更改整个控件的DataContext，而是更改其内容的DataContext。在你的例子中，它将是ImageButton的Button元素的DataContext。

换句话说——改变ImageButton的构造函数中的这一行:

this.DataContext = this;


this.imgButton.DataContext = this;

当然，对TabItem控件也做同样的操作。

基本上，更改DataContext是一个坏主意(即使您按照我的建议更改它)，所以尽量避免它。

注:我可以给你一个不更改DC的解决方案，但是我现在太忙了，抱歉。如果别人这么做，我会给他们投票!:)

编辑-附加观察(与问题无关)

我也不认为setter是个好主意:

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

如果您需要使用资源/图像中没有的图像，您会非常难过。此外，将属性的类型更改为ImageSource(因为这通常用于图像源:))或对象可能是一个好主意。在WinRT中，很多东西都可以转换为ImageSource，所以如果它是object类型的话会更灵活。

相关文章：