Question

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

Answer 1

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