Question

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

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 };

    }
}
}

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

  <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>

Answer 1

使用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>

Answer 2

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

<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"/>

Answer 3

这似乎已经成功了：

<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>

更短的版本没有花里胡哨 /////////////////////////////////////////

 <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

如何将图像绑定到按钮？

3 个答案: