I want to create a On/Off button in WPF and I want it to change its appearance when the user clicks it (if it was on switch to off, if it wad off switch to on) using images. I added the images I want to use to the resources:
我想在WPF中创建一个On / Off按钮,我想让它在用户点击它时改变它的外观(如果它在关闭时切换到关闭,如果它关闭切换到打开)使用图像。我将要使用的图像添加到资源中:
<Window.Resources>
<Image x:Key="Off1" Source="/WPFApplication;component/Images/off_button.png" Height="30" Width="70" />
<Image x:Key="On1" Source="/WPFApplication;component/Images/on_button.png" Height="30" Width="70"/>
</Window.Resources>
And the event code is, "flag" is a Boolean local variable initialize as true:
而事件代码是,“flag”是一个布尔局部变量,初始化为true:
private void OnOff1Btn_Click(object sender, RoutedEventArgs e)
{
if (flag)
{
OnOff1Btn.Content = FindResource("Off1");
flag = false;
}
else
{
OnOff1Btn.Content = FindResource("On1");
flag = true;
}
}
Now I need to create 2 on/off buttons, that behave the same. When I tried to use the same resources for the second button I got an exception:
现在我需要创建2个开/关按钮,其行为相同。当我尝试为第二个按钮使用相同的资源时,我得到了一个例外:
Specified element is already the logical child of another element. Disconnect it first.
Can I use the same images resources in the second button or do I have to add the images again as resources with different Key?
我可以在第二个按钮中使用相同的图像资源,还是必须将图像作为具有不同密钥的资源再次添加?
3 个解决方案
#1
11
You should use BitmapImage for image sharing.
您应该使用BitmapImage进行图像共享。
<BitmapImage x:Key="Off1" UriSource="/WPFApplication;component/Images/off_button.png" Height="30" Width="70" />
<BitmapImage x:Key="On1" UriSource="/WPFApplication;component/Images/on_button.png" Height="30" Width="70"/>
After that you can create Multiple Image with BitmapImage
之后,您可以使用BitmapImage创建多个图像
In XAML
在XAML中
<Button ..>
<Button.Content>
<Image Source="{StaticResource Off1}" />
</Button.Content>
</Button>
In Code
在代码中
Image image = new Image();
image.Source = FindResource("Off1");
OnOff1Btn.Content = image;
#2
10
Set Shared in your style to false
将您的样式中的共享设置为false
<StackPanel >
<StackPanel.Resources>
<Image x:Key="flag" Source="flag-italy-icon.png" Width="10" x:Shared="false"/>
</StackPanel.Resources>
<ContentControl Content="{DynamicResource flag}" />
<ContentControl Content="{DynamicResource flag}" />
#3
1
While @Tilak's solution is definitely one way to go, you can also do this via Style.Triggers
虽然@Tilak的解决方案绝对是一种方法,但你也可以通过Style.Triggers来实现
Here's an example (with the assumption that Flag
is a public property exposing flag):
这是一个例子(假设Flag是公共属性暴露标志):
<Button Content="{StaticResource On1}">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Flag}" Value="false">
<Setter Property="Content" Value="{StaticResource Off1}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
#1
11
You should use BitmapImage for image sharing.
您应该使用BitmapImage进行图像共享。
<BitmapImage x:Key="Off1" UriSource="/WPFApplication;component/Images/off_button.png" Height="30" Width="70" />
<BitmapImage x:Key="On1" UriSource="/WPFApplication;component/Images/on_button.png" Height="30" Width="70"/>
After that you can create Multiple Image with BitmapImage
之后,您可以使用BitmapImage创建多个图像
In XAML
在XAML中
<Button ..>
<Button.Content>
<Image Source="{StaticResource Off1}" />
</Button.Content>
</Button>
In Code
在代码中
Image image = new Image();
image.Source = FindResource("Off1");
OnOff1Btn.Content = image;
#2
10
Set Shared in your style to false
将您的样式中的共享设置为false
<StackPanel >
<StackPanel.Resources>
<Image x:Key="flag" Source="flag-italy-icon.png" Width="10" x:Shared="false"/>
</StackPanel.Resources>
<ContentControl Content="{DynamicResource flag}" />
<ContentControl Content="{DynamicResource flag}" />
#3
1
While @Tilak's solution is definitely one way to go, you can also do this via Style.Triggers
虽然@Tilak的解决方案绝对是一种方法,但你也可以通过Style.Triggers来实现
Here's an example (with the assumption that Flag
is a public property exposing flag):
这是一个例子(假设Flag是公共属性暴露标志):
<Button Content="{StaticResource On1}">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Flag}" Value="false">
<Setter Property="Content" Value="{StaticResource Off1}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>