C# 如何将图像绑定到按钮？_C#_Wpf_Data Binding_Binding

C# 如何将图像绑定到按钮？

c# wpf data-binding binding

C# 如何将图像绑定到按钮？,c#,wpf,data-binding,binding,C#,Wpf,Data Binding,Binding,显示列表框的图像，但不显示按钮的图像。有什么想法吗？如何使用DataTemplate将图像绑定到按钮 namespace wpftest { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { string URL1 = "example.com/tes

显示列表框的图像，但不显示按钮的图像。有什么想法吗？如何使用DataTemplate将图像绑定到按钮

namespace wpftest
{
  /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
    string URL1 = "example.com/test.jpg";

    public MainWindow()
    {
        InitializeComponent();
        MyObj list = new MyObj(URL1);

        List<MyObj> _list = new List<MyObj>()
        {
           new MyObj{ url1 = "example.com/test.jpg"},
           new MyObj{ url1 = "example.com/test.jpg"},
           new MyObj{ url1 = "example.com/test.jpg"}
        };

        button1.DataContext = new MyObj { url1 = "example.com/test.jpg" };
        listBox1.DataContext = new CollectionViewSource { Source = _list };

    }
}
}

名称空间wpftest
{
/// 
///MainWindow.xaml的交互逻辑
/// 
公共部分类主窗口：窗口
{
字符串URL1=“example.com/test.jpg”；
公共主窗口（）
{
初始化组件（）；
MyObj列表=新的MyObj（URL1）；
列表_List=新列表（）
{
新的MyObj{url1=“example.com/test.jpg”}，
新的MyObj{url1=“example.com/test.jpg”}，
新的MyObj{url1=“example.com/test.jpg”}
};
button1.DataContext=newmyobj{url1=“example.com/test.jpg”}；
listBox1.DataContext=new CollectionViewSource{Source=\u list}；
}
}
}

//////////////////////////////////////////////////////////////////////////////////////

  <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Res="clr-namespace:wpftest.Properties"
                    >

    <DataTemplate x:Key="myTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Height="307" Name="image1" Stretch="None" Width="300" Source="{Binding url1}"/>
            <StackPanel>
                <TextBlock 
                    Text="{x:Static Res:Resources.Title}"/>
                <TextBlock Text="URL"/>
            </StackPanel>
        </StackPanel>
   </DataTemplate>

    <DataTemplate x:Key="customImageTileButton">
        <StackPanel Orientation="Horizontal">
            <Image Height="307" Name="image1" Stretch="None" Width="300" Source="{Binding url1}"/>

            <TextBlock Name="customTitle" Text="Title"/>
        </StackPanel>
    </DataTemplate>
</ResourceDictionary>

<Window x:Class="wpftest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="720" Width="1280"
    xmlns:Res="clr-namespace:wpftest.Properties" DataContext="{Binding}">

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ResourceDictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>


<Grid>
    <StackPanel Height="457" HorizontalAlignment="Left" Name="stackPanel1" VerticalAlignment="Top" Width="1258" >
        <ListBox Height="452" Name="listBox1" Width="1253" 
                 ItemTemplate="{StaticResource myTemplate}"
                 ItemsSource="{Binding}">         
        </ListBox>
    </StackPanel>

    <Button Content="Button" 
            ContentTemplate="{StaticResource customImageTileButton}"
            HorizontalAlignment="Left"
            Margin="84,492,0,0"
            Name="button1" 
            VerticalAlignment="Top" 
            />
</Grid>

 <Style x:Key="myButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Image x:Name="ButtonImage" Width="280" Height="105" Canvas.Left="8" Canvas.Top="8" Source="{Binding url1}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>   
    </Style

////////////////////////////////////////////////////

  <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Res="clr-namespace:wpftest.Properties"
                    >

    <DataTemplate x:Key="myTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Height="307" Name="image1" Stretch="None" Width="300" Source="{Binding url1}"/>
            <StackPanel>
                <TextBlock 
                    Text="{x:Static Res:Resources.Title}"/>
                <TextBlock Text="URL"/>
            </StackPanel>
        </StackPanel>
   </DataTemplate>

    <DataTemplate x:Key="customImageTileButton">
        <StackPanel Orientation="Horizontal">
            <Image Height="307" Name="image1" Stretch="None" Width="300" Source="{Binding url1}"/>

            <TextBlock Name="customTitle" Text="Title"/>
        </StackPanel>
    </DataTemplate>
</ResourceDictionary>

<Window x:Class="wpftest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="720" Width="1280"
    xmlns:Res="clr-namespace:wpftest.Properties" DataContext="{Binding}">

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ResourceDictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>


<Grid>
    <StackPanel Height="457" HorizontalAlignment="Left" Name="stackPanel1" VerticalAlignment="Top" Width="1258" >
        <ListBox Height="452" Name="listBox1" Width="1253" 
                 ItemTemplate="{StaticResource myTemplate}"
                 ItemsSource="{Binding}">         
        </ListBox>
    </StackPanel>

    <Button Content="Button" 
            ContentTemplate="{StaticResource customImageTileButton}"
            HorizontalAlignment="Left"
            Margin="84,492,0,0"
            Name="button1" 
            VerticalAlignment="Top" 
            />
</Grid>

 <Style x:Key="myButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Image x:Name="ButtonImage" Width="280" Height="105" Canvas.Left="8" Canvas.Top="8" Source="{Binding url1}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>   
    </Style

使用ImageBrush作为按钮的背景。下面是示例代码

    <Window x:Class="ImageOnButton.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <ImageSource x:Key="img">C:\Users\vanathi\Desktop\SampleImage.jpg</ImageSource>
</Window.Resources>
<Grid>
    <Button Width="250" Height="100">
        <Button.Background>
            <ImageBrush ImageSource="{StaticResource img}"/>
        </Button.Background>
    </Button>
</Grid>


C:\Users\vanathi\Desktop\SampleImage.jpg

您可以将图像直接绑定到按钮的前景：

<Button Height="50" Width="50" Grid.Column="1">
    <Image Source="{DynamicResource ChooseImageSource}" />
</Button>

其中，图像资源定义为：

<BitmapImage x:Key="ChooseImageSource" CacheOption="OnLoad"
             CreateOptions="IgnoreImageCache" UriSource="resources/shuffle.png"/>

这似乎成功了：

<Style x:Key="customStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="3"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="0,0,1,1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Canvas x:Name="ButtonCanvas" Width="296" Height="121">
                    <Image x:Name="ButtonImage" Width="280" Height="105" Canvas.Left="8" Canvas.Top="8" Source="{Binding url1}"/>
                </Canvas>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused" Value="true"/>
                    <Trigger Property="IsDefaulted" Value="true"/>
                    <Trigger Property="IsPressed" Value="true"/>
                    <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                    <Trigger Property="IsEnabled" Value="true">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

没有铃铛和口哨的较短版本 /////////////////////////////////////////

  <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Res="clr-namespace:wpftest.Properties"
                    >

    <DataTemplate x:Key="myTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Height="307" Name="image1" Stretch="None" Width="300" Source="{Binding url1}"/>
            <StackPanel>
                <TextBlock 
                    Text="{x:Static Res:Resources.Title}"/>
                <TextBlock Text="URL"/>
            </StackPanel>
        </StackPanel>
   </DataTemplate>

    <DataTemplate x:Key="customImageTileButton">
        <StackPanel Orientation="Horizontal">
            <Image Height="307" Name="image1" Stretch="None" Width="300" Source="{Binding url1}"/>

            <TextBlock Name="customTitle" Text="Title"/>
        </StackPanel>
    </DataTemplate>
</ResourceDictionary>

<Window x:Class="wpftest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="720" Width="1280"
    xmlns:Res="clr-namespace:wpftest.Properties" DataContext="{Binding}">

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ResourceDictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>


<Grid>
    <StackPanel Height="457" HorizontalAlignment="Left" Name="stackPanel1" VerticalAlignment="Top" Width="1258" >
        <ListBox Height="452" Name="listBox1" Width="1253" 
                 ItemTemplate="{StaticResource myTemplate}"
                 ItemsSource="{Binding}">         
        </ListBox>
    </StackPanel>

    <Button Content="Button" 
            ContentTemplate="{StaticResource customImageTileButton}"
            HorizontalAlignment="Left"
            Margin="84,492,0,0"
            Name="button1" 
            VerticalAlignment="Top" 
            />
</Grid>

 <Style x:Key="myButton" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Image x:Name="ButtonImage" Width="280" Height="105" Canvas.Left="8" Canvas.Top="8" Source="{Binding url1}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>   
    </Style


首先，不要同时设置Content和ContentTemplate属性。另外，看看我的答案，我想做一个模板，我可以使用各种按钮。如果我不设置ContentTemplate，我该怎么做？@WonkotheSane，你的答案也与图像格式有关，我的图像根本不显示。如何将上面的DataTemplate绑定到任何按钮？谢谢：）这是可行的，但我需要一个全局模板，我可以应用于所有按钮。不必编写冗余代码。这与这样做有什么不同：使用DataTemplate时，url1没有被看到或识别有什么原因吗？@Fabii我不确定-但可能是uri1
的路径在运行时无效。