Blend4, How to make WPF App(button show up pic)

How to make a button let a picture show up ?

what i Need to do, is creating 300 buttons each of these buttons will represent a unique path and pic every pic is defferent than the other? Unfortunately, WPF SketchFlow or Silverlight SketchFlow (I don't know the difference) can not be running as a program on computer. so what left is WFP app. Furthermore, i find it so difficult to just create one button linked to a pic's path!!!!.

I watched all of the Microsoft training Videos(the 5 days ones, if u dont know what i mean)http://www.microsoft.com/expression/resources/blendtraining/ . And still cant do it. I was searching for almost 4 weeks, and i still do.

Any idea how to create this essay app which require lots of work.

summery: 1-I don't know which app to use Silverlight or WPF app?(I don't know the difference)

2-i need to create a button that when i press on it, (New sorry) there will be a pic showing up in certain place that ill choose).

so in the end i need the code that will let the button work. direction for further info that ill need(websites that include vids or training by any typ开发者_C百科e)

My regards SHeeDeED :)

---

Maybe you should start with a simple program: 1 button, showing 1 picture.

Handcraft it in XAML (no blend) and when you're stuck post a specific question here with the code.

---

I use Blend for most of my XAML/WPF UI design, and it works pretty well for me. I did, however, learn WPF and XAML by writing it longhand in the Visual Studio designer first. For any coding other than XAML (VB.NET, C#, C++, etc) I would highly suggest using Visual Studio as there are no bells and whistles in the Blend code window. It is essentially a colorful text editor.

As for buttons displaying images I have a couple of questions. I imagine your buttons are going to be loaded from a collection of some objects or something. By far, this is better than specifying each button in the XAML code.

I will assume your collection of objects has an ImagePath (or similarly named) property. The following should work out alright.

Load your ListBox with the Items, (see either http://www.WindowsClient.net for the old [Windows Forms] way, or read up on MVVM for the newer better way). Below is my listbox; ItemsSource is bound to the ImageCollection property on my ViewModel in this case. The items in my Imagecollection have an ImagePath property that is just a string file path to the image.

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

In Blend, you can create a DataTemplate by right clicking on the listBox, and going to Edit Additional Templates > Edit Generated Items (ItemTemplate).

From there you are just editing the layout of the items that will be created in the listbox. Below is my example of an item button with an image bound to the ImagePath property.

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

Let me know if you need more info and I can post some more resource links.

EDIT

---

Alright, so here is a simple little application that I made to illustrate how this can be done probably the easiest as possible. In this application, I have 3 classes:

• ImageButton - It just consists of two string properties, ImagePath and ImageName.
• ImageButtonCollection - Inherited from ObservableCollection, creates and adds 300 buttons (iterates 1 to 300 and sets ImagePath to "C:\Images\image{i}.png" and ImageName to "image{i}".
• The MainWindow class - I will post the contents below.

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 - I am more familiar with VB, but this can be easily ported to C# or whatever.

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

So, the ListBoxes ItemsSource property is bound to the CollectionViewSource created in the Window.Resources. The ListBox also has in it's resources a DataTemplate for the ImageButton class. Anytime an ImageButton is displayed in that listbox, that template will be used. The buttons click event is set to the CreateButtons method in the codebehind.

That method finds the CollectionViewSource resource, and sets it's source to a new instance of the ImageButtonCollection class. Once that is done, the UI is notified of an update (since the ObservableCollection has built in UI notification) and changes accordingly displaying 300 buttons with a little textblock next to them with the image name.

If you run this, create a folder on your C drive with some images named "imageX.png" with x being a number 1 to 300. Below are the other two classes so you can create/compile/run it.

ImageButton class

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 class

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

You never specified how you wanted the image displayed. You may not want them to be in a listbox. The beauty of WPF is that once you get it working in a listBox or whatever ItemsControl, you can easily change to another ItemsControl, or even customize one. Go into the ListBox template and change the ItemsHost to use a uniform grid or to stack items horizontally instead of vertically.