Я использую Blend для большей части моего дизайна пользовательского интерфейса XAML / WPF, и он довольно хорошо работает для меня.Однако я изучил WPF и XAML, предварительно написав их в конструкторе Visual Studio.Для любого кодирования, кроме XAML (VB.NET, C #, C ++ и т. Д.), Я настоятельно рекомендую использовать Visual Studio, поскольку в окне Blend code нет наворотов.По сути, это цветной текстовый редактор.
Что касается кнопок отображения изображений, у меня есть пара вопросов.Я предполагаю, что ваши кнопки будут загружены из коллекции каких-то объектов или чего-то еще.Безусловно, это лучше, чем указывать каждую кнопку в коде XAML.
Я предполагаю, что ваша коллекция объектов имеет свойство ImagePath (или с аналогичным именем).Следующее должно сработать.
Загрузите ваш ListBox с элементами (см. Либо http://www.WindowsClient.net для старого способа [Windows Forms], либо прочитайте MVVM для более нового лучшего способа).Ниже мой список;В этом случае ItemsSource привязан к свойству ImageCollection в моей ViewModel.Элементы в моей коллекции изображений имеют свойство ImagePath, представляющее собой просто строковый путь к файлу изображения.
<ListBox ItemTemplate="{DynamicResource MyImageButton}" ItemsSource="{Binding ImageCollection}"/>
В Blend вы можете создать шаблон данных, щелкнув правой кнопкой мыши по списку и перейдя в меню «Редактировать дополнительные шаблоны».> Редактировать сгенерированные элементы (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 привязано к CollectionViewSource, созданному в Window.Resources. ListBox также имеет в своих ресурсах DataTemplate для класса ImageButton. Каждый раз, когда ImageButton отображается в этом списке, этобудет использоваться шаблон. Для события нажатия кнопки в коде задан метод CreateButtons.
Этот метод находит ресурс CollectionViewSourceи устанавливает его источник для нового экземпляра класса ImageButtonCollection.Как только это будет сделано, пользовательский интерфейс будет уведомлен об обновлении (поскольку ObservableCollection имеет встроенное уведомление пользовательского интерфейса) и изменится соответственно, отображая 300 кнопок с небольшим текстовым блоком рядом с ними с именем изображения.
Если вы запустите этосоздайте на диске C папку с несколькими изображениями с именем «imageX.png», где x - это число от 1 до 300. Ниже приведены два других класса, чтобы вы могли создать / скомпилировать / запустить их.
Класс 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 для использования равномерной сетки или для размещения элементов по горизонтали, а не по вертикали.