Blend4，如何制作WPF应用程序（按钮显示图片）

Question

如何制作按钮让图片显示？

我需要做的是，创建300个按钮，每个按钮将代表一个独特的路径和图片每张图片不同于另一个？不幸的是，WPF SketchFlow或Silverlight SketchFlow（我不知道区别）不能作为计算机上的程序运行。所以剩下的是WFP应用程序。此外，我发现创建一个链接到pic的路径的按钮是如此困难!!!!

我观看了所有微软培训视频（5天，如果你不知道我的意思）http://www.microsoft.com/expression/resources/blendtraining/。仍然无法做到这一点。我正在寻找将近4周，我仍然这样做。

任何想法如何创建这篇需要大量工作的论文应用程序。

夏日 ：1 - 我不知道哪个应用使用Silverlight或WPF应用？（我不知道区别）

2 - 我需要创建一个按钮，当我按下它时，（新抱歉）将会出现在某个地方显示错误的图片。

所以最后我需要让按钮工作的代码。需要进一步信息的方向（包括视频或任何类型的培训的网站）

我对SHeeDeED的看法：）

Answer 1

也许你应该从一个简单的程序开始：1个按钮，显示1张图片。

在XAML中手工制作它（没有混合），当你在这里用代码发布特定问题时。

Answer 2

我在我的大多数XAML / WPF UI设计中使用Blend，它对我来说非常好用。但是，我首先通过在Visual Studio设计器中手写它来学习WPF和XAML。对于除XAML之外的任何编码（VB.NET，C＃，C ++等），我强烈建议使用Visual Studio，因为Blend代码窗口中没有任何花哨的功能。它本质上是一个彩色文本编辑器。

至于显示图像的按钮，我有几个问题。我想你的按钮将从一些对象或其他东西的集合中加载。到目前为止，这比指定XAML代码中的每个按钮要好。

我假设您的对象集合具有ImagePath（或类似命名）属性。以下应该可以正常工作。

使用Items加载ListBox（对于旧的[Windows Forms]方式，请参阅http://www.WindowsClient.net，或者以更新的方式读取MVVM）。下面是我的列表框;在这种情况下，ItemsSource绑定到我的ViewModel上的ImageCollection属性。我的Imagecollection中的项目具有ImagePath属性，该属性只是图像的字符串文件路径。

<ListBox ItemTemplate="{DynamicResource MyImageButton}" ItemsSource="{Binding ImageCollection}"/>

在Blend中，您可以通过右键单击listBox创建DataTemplate，然后转到编辑其他模板＆gt;编辑生成的项目（ItemTemplate）。

从那里开始，您只需编辑将在列表框中创建的项目的布局。下面是我的项目按钮示例，其中图像绑定到ImagePath属性。

    <DataTemplate x:Key="MyImageButton">
        <Button Width="75">
            <Button.Content>
                <StackPanel>
                    <Image Source="{Binding ImagePath}" HorizontalAlignment="Left" Height="64" Width="64"/>
                </StackPanel>
            </Button.Content>
        </Button>
    </DataTemplate>

如果您需要更多信息，请告诉我，我可以发布更多资源链接。

修改

---

好的，所以这里有一个简单的小应用程序，我用它来说明如何做到这一点可能是最简单的。在这个应用程序中，我有3个类：

• ImageButton - 它只包含两个字符串属性，ImagePath和ImageName。
• ImageButtonCollection - 继承自ObservableCollection，创建并添加300个按钮（迭代1到300并将ImagePath设置为“C：\ Images \ image {i} .png”，将ImageName设置为“image {i}”。
• MainWindow类 - 我将发布以下内容。

MainWindow.xaml

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ImageButtons"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <CollectionViewSource x:Key="ImageButtonsCVS"/>
</Window.Resources>
<Grid>
    <ListBox Height="311" HorizontalAlignment="Left" x:Name="ListBox1" VerticalAlignment="Top" Width="268" HorizontalContentAlignment="Stretch">
        <ListBox.Resources>
            <DataTemplate DataType="{x:Type local:ImageButton}">
                <Border Background="#5A000000" CornerRadius="5">
                    <Grid Height="Auto">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Button Grid.ColumnSpan="1" Height="30" Width="30" BorderBrush="#38FFFFFF" BorderThickness="1" Margin="5" Padding="0">
                            <Image Source="{Binding ImagePath}"/>
                        </Button>
                        <TextBlock Margin="0" TextWrapping="Wrap" Text="{Binding ImageName}" d:LayoutOverrides="Width, Height" Grid.Column="1" VerticalAlignment="Center" Foreground="White"/>
                    </Grid>
                </Border>

            </DataTemplate>         
        </ListBox.Resources>      
        <ListBox.ItemsSource>
            <Binding Source="{StaticResource ImageButtonsCVS}"/>
        </ListBox.ItemsSource>      
    </ListBox>
    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="322,54,0,0" x:Name="Button1" VerticalAlignment="Top" Width="75" Click="CreateButtons" />
</Grid>

MainWindow.xaml.vb - 我对VB比较熟悉，但这可以很容易地移植到C＃或其他任何东西。

Class MainWindow 

    Private Sub CreateButtons(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        Dim ImageButtonCVS As CollectionViewSource = Me.FindResource("ImageButtonsCVS")
        ImageButtonCVS.Source = New ImageButtonCollection
    End Sub
End Class

因此，ListBoxes ItemsSource属性绑定到Window.Resources中创建的CollectionViewSource。 ListBox在其资源中还有一个ImageButton类的DataTemplate。只要在该列表框中显示ImageButton，就会使用该模板。按钮单击事件设置为代码隐藏中的CreateButtons方法。

该方法找到CollectionViewSource资源，并将其源设置为ImageButtonCollection类的新实例。完成后，UI会收到更新通知（因为ObservableCollection已内置UI通知），并相应地更改显示300个按钮，旁边有一个带有图像名称的小文本块。

如果你运行它，在你的C盘上创建一个文件夹，其中一些图像名为“imageX.png”，x为1到300。下面是另外两个类，所以你可以创建/编译/运行它。 / p>

ImageButton类

Public Class ImageButton
    Public Property ImagePath As String
    Public Property ImageName As String

    Public Sub New()

    End Sub

    Public Sub New(ByVal Path As String, ByVal Name As String)
        Me.ImagePath = Path
        Me.ImageName = Name
    End Sub
End Class

ImageButtonCollection类

Imports System.Collections.ObjectModel

    Public Class ImageButtonCollection
        Inherits ObservableCollection(Of ImageButton)

        Public Sub New()
            For i As Integer = 1 To 300
                Me.Add(New ImageButton(String.Format("C:\Images\image{0}.png", i), String.Format("Image{0}", i)))
            Next
        End Sub


    End Class

您从未指定过想要显示图像的方式。您可能不希望它们出现在列表框中。 WPF的优点在于，一旦你在listBox或任何ItemsControl中使用它，你就可以轻松地更改为另一个ItemsControl，甚至可以自定义一个。进入ListBox模板并更改ItemsHost以使用统一网格或水平堆叠项目而不是垂直堆叠。