WPF-带有无法正确显示图像的UserControl [英] WPF - UserControl with images not showing properly
问题描述
好，这是我的问题:
我创建了一个名为MultiImage的UserControl，它由两个图像组成，一个图像比另一个图像大.
我要在MainWindow中尝试做的是，当您按下给定的RadioButton时，两个图像之一会更改其来源(2个RadioButton会更改大图像，而3个会更改小图像).在MultiImage类的设计视图中，我可以看到元素，但是在MainWindow的设计视图中，该对象没有出现，并且即使您单击RadioButtons，一旦启动应用程序，该对象也不会出现. /p>
代码如下:
MainWindow.xaml
<Window x:Class="MultiElementImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MultiElementImage"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:MultiImage x:Name="image1" Width="Auto" Height="Auto" Margin="10,10,208,10" />
<RadioButton Content="Laptop" GroupName="mainIcon" HorizontalAlignment="Left" Margin="335,97,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_1"/>
<RadioButton Content="Trash can" GroupName="mainIcon" HorizontalAlignment="Left" Margin="335,117,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_2"/>
<RadioButton Content="Warning" GroupName="stateIcon" HorizontalAlignment="Left" Margin="335,158,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_3"/>
<RadioButton Content="Battery" GroupName="stateIcon" HorizontalAlignment="Left" Margin="335,178,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_4"/>
<RadioButton Content="Error" GroupName="stateIcon" HorizontalAlignment="Left" Margin="335,198,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_5"/>
</Grid>
</Window>
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void RadioButton_Checked_1(object sender, RoutedEventArgs e)
{
image1.mainIcon.Source = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative));
}
private void RadioButton_Checked_2(object sender, RoutedEventArgs e)
{
image1.mainIcon.Source = new BitmapImage(new Uri("Images/trashcan.png", UriKind.Relative));
}
private void RadioButton_Checked_3(object sender, RoutedEventArgs e)
{
image1.statusIcon.Source = new BitmapImage(new Uri("Images/warning.png", UriKind.Relative));
}
private void RadioButton_Checked_4(object sender, RoutedEventArgs e)
{
image1.statusIcon.Source = new BitmapImage(new Uri("Images/battery.png", UriKind.Relative));
}
private void RadioButton_Checked_5(object sender, RoutedEventArgs e)
{
image1.statusIcon.Source = new BitmapImage(new Uri("Images/null.png", UriKind.Relative));
}
}
MultiImage.xaml
<UserControl x:Class="MultiElementImage.MultiImage"
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>
<Image Name="mainIcon" HorizontalAlignment="Left" Height="300" VerticalAlignment="Top" Width="300" Source="Images/laptop.png"/>
<Image Name="statusIcon" HorizontalAlignment="Left" Height="Auto" Margin="190,10,0,0" VerticalAlignment="Top" Width="Auto" Source="Images/null.png"/>
</Grid>
</UserControl>
MultiImage.xaml.cs
public partial class MultiImage : UserControl
{
public MultiImage()
{
this.mainIcon = new Image();
this.mainIcon.Source = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative));
this.statusIcon = new Image();
this.statusIcon.Source = new BitmapImage(new Uri("Images/warning.png", UriKind.Relative));
}
}
我尝试放置2个Image对象，并使用RadioButtons更改它们，以检查图像的路由是否正确，并且可以正常工作，但是我想使用UserControl，以便可以将状态图标轻松地放置在需要的地方.对可能发生的事情有任何想法吗?
提前谢谢！
问题是UserControl的构造函数中的代码.它用新的Image控件替换了XAML定义的元素mainIcon和statusIcon，但没有将它们添加到Grid中.因此它们不可见，因此设置其Source属性没有视觉效果.
只需删除所有代码并调用InitializeComponent:
public MultiImage()
{
InitializeComponent();
}
Ok, here is my problem:
I have created a UserControl named MultiImage, which is composed by a two images, one bigger than the other.
What I am trying to do in the MainWindow is that, when you press a given RadioButton, one of the two images changes it source (2 RadioButtons change the big image and 3 change the little one). In the design view of the MultiImage class I can see the elements, but in the design view of the MainWindow, the object doesn't appear, and once you start the application it keeps not appearing, even if you click on the RadioButtons.
The code is the following:
MainWindow.xaml
<Window x:Class="MultiElementImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MultiElementImage"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:MultiImage x:Name="image1" Width="Auto" Height="Auto" Margin="10,10,208,10" />
<RadioButton Content="Laptop" GroupName="mainIcon" HorizontalAlignment="Left" Margin="335,97,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_1"/>
<RadioButton Content="Trash can" GroupName="mainIcon" HorizontalAlignment="Left" Margin="335,117,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_2"/>
<RadioButton Content="Warning" GroupName="stateIcon" HorizontalAlignment="Left" Margin="335,158,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_3"/>
<RadioButton Content="Battery" GroupName="stateIcon" HorizontalAlignment="Left" Margin="335,178,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_4"/>
<RadioButton Content="Error" GroupName="stateIcon" HorizontalAlignment="Left" Margin="335,198,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_5"/>
</Grid>
</Window>
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void RadioButton_Checked_1(object sender, RoutedEventArgs e)
{
image1.mainIcon.Source = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative));
}
private void RadioButton_Checked_2(object sender, RoutedEventArgs e)
{
image1.mainIcon.Source = new BitmapImage(new Uri("Images/trashcan.png", UriKind.Relative));
}
private void RadioButton_Checked_3(object sender, RoutedEventArgs e)
{
image1.statusIcon.Source = new BitmapImage(new Uri("Images/warning.png", UriKind.Relative));
}
private void RadioButton_Checked_4(object sender, RoutedEventArgs e)
{
image1.statusIcon.Source = new BitmapImage(new Uri("Images/battery.png", UriKind.Relative));
}
private void RadioButton_Checked_5(object sender, RoutedEventArgs e)
{
image1.statusIcon.Source = new BitmapImage(new Uri("Images/null.png", UriKind.Relative));
}
}
MultiImage.xaml
<UserControl x:Class="MultiElementImage.MultiImage"
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>
<Image Name="mainIcon" HorizontalAlignment="Left" Height="300" VerticalAlignment="Top" Width="300" Source="Images/laptop.png"/>
<Image Name="statusIcon" HorizontalAlignment="Left" Height="Auto" Margin="190,10,0,0" VerticalAlignment="Top" Width="Auto" Source="Images/null.png"/>
</Grid>
</UserControl>
MultiImage.xaml.cs
public partial class MultiImage : UserControl
{
public MultiImage()
{
this.mainIcon = new Image();
this.mainIcon.Source = new BitmapImage(new Uri("Images/laptop.png", UriKind.Relative));
this.statusIcon = new Image();
this.statusIcon.Source = new BitmapImage(new Uri("Images/warning.png", UriKind.Relative));
}
}
I have tried putting 2 Image objects and changing them with the RadioButtons to check if the route for the images is correct, and it worked, but I want to use the UserControl so I can easily put the status icon wherever I need. Any thoughts about what could be happening?
Thanks in advance!
The problem is the code in your UserControl's constructor. It replaces the XAML-defined elements mainIcon and statusIcon by new Imagecontrols, but does not add them to the Grid. Hence they are not visible, and therefore setting their Source property has no visual effect.
Just remove all your code and call InitializeComponent:
public MultiImage()
{
InitializeComponent();
}
这篇关于WPF-带有无法正确显示图像的UserControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
