Hi,
Based on the image above, I would like to align the words "Action", "Adventure", "Arcade" to left most and align it to appear same height as the blue right arrow
my code for this is created dynamically:
Dim intRow As Integer
Dim intColumn As Integer
intRow = 0
intColumn = 0
Dim rd As RowDefinition
For Each abc In ArrayOfItems
Dim newButton As New Button
newButton.MaxHeight = 35
newButton.MaxWidth = 300
newButton.Background = Brushes.Transparent
newButton.BorderBrush = Brushes.Transparent
newButton.Tag = abc.application_category_id
Dim sp As New StackPanel
sp.Orientation = Orientation.Horizontal
sp.HorizontalAlignment = Windows.HorizontalAlignment.Left
sp.VerticalAlignment = Windows.VerticalAlignment.Center
Dim Image2 As New Image
Dim src As New Uri("/Images/chevron_blue.png", UriKind.Relative)
Dim img As New BitmapImage(src)
Image2.Width = 10
Image2.Height = 10
Image2.HorizontalAlignment = Windows.HorizontalAlignment.Left
Image2.VerticalAlignment = Windows.HorizontalAlignment.Left
Image2.Source = img
Dim LabelApp As New Label
LabelApp.Content = abc.category_name
LabelApp.FontWeight = FontWeights.Bold
LabelApp.FontSize = 9
LabelApp.MaxWidth = 270
LabelApp.Foreground = Brushes.Black
LabelApp.HorizontalContentAlignment = Windows.HorizontalAlignment.Left
LabelApp.VerticalAlignment = Windows.HorizontalAlignment.Left
sp.Children.Add(LabelApp)
sp.Children.Add(Image2)
newButton.Content = sp
Grid.SetColumn(newButton, intColumn)
Grid.SetRow(newButton, intRow)
gridCategoryGames.Children.Add(newButton)
intRow = intRow + 1
rd = New RowDefinition With {.Height = GridLength.Auto}
gridCategoryGames.RowDefinitions.Add(rd)
gridCategoryGames.UpdateLayout()
Next abc
End If
Ouch, that is an ugly way to do it :)
Fortunately WPF has something that will cut your code down substantially, the ItemsControl. As you already have ArrayOfItems
which is obviously IEnumerable, you can craft you XAML like this:
<ItemsControl ItemsSource="{Binding ArrayOfItems}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Vertical" HorizontalAlignment="Right" >
<TextBlock Text="myText"/>
<Image Source="path to my image" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You can then get rid of all that code that is manually creating items. The controls specified in ItemsControl.ItemTemplate
will be repeated for every item in your list. The sky is the limit with this approach (there are literally thousands of examples of how to use this control).