WPF Dynamically add buttons with different multiple text

Question

I create a template for buttons:

        <Style  x:Key="TableButtonStyle"  TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="100" />
        <Setter Property="Margin" Value="20" />
        <Setter Property="Template">
                <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Width="{TemplateBinding Width}"  
                          Height="{TemplateBinding Height}" ClipToBounds="True">
                        <!-- Inner Rectangle with rounded corners. -->
                        <Rectangle x:Name="innerRectangle"  
                            Stroke="Transparent"  
                            StrokeThickness="20"  
                            Fill="{TemplateBinding Background}"  
                            RadiusX="20" RadiusY="20"   />
                        <Ellipse x:Name="NumberGuests"
                            Width="25" 
                            Height="25"   
                            Stretch="Fill" 
                            StrokeLineJoin="Round" 
                            Fill="Red"
                            Margin="-70,-70,0,0"/>
                        <Ellipse x:Name="NumberChecks"
                            Width="25" 
                            Height="25"   
                            Stretch="Fill" 
                            StrokeLineJoin="Round" 
                            Fill="Green"
                            Margin="70,-70,0,0"/>
                        <Rectangle x:Name="Time"  
                            Width="70" 
                            Height="25"
                            Fill="White"  
                            RadiusX="10" RadiusY="10"   
                            Margin="0,50,0,0"/>
                        <TextBlock x:Name='TableID'
                            FontSize="12" 
                            HorizontalAlignment="Center"
                            FontWeight="Bold"
                            Margin="0,25,0,0"
                            Text="Table_New"/>
                        <TextBlock x:Name='TimeID'
                            FontSize="12" 
                            HorizontalAlignment="Center"
                            Margin="0,65,0,0"    
                            Text="Time_New" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Opacity" Value="0.5" />
            </Trigger>
        </Style.Triggers>
    </Style>


 Private Sub CreateButton_Click(sender As Object, e As RoutedEventArgs)
    Dim TableName As String
    Dim TimeNotAvailable As String

    LayoutGrid.AllowDragging = True
    ToggleButton.Content = "Edit"

    Dim LocationButton As New Button
    Dim style As Style = TryCast(Me.FindResource("TableButtonStyle"), Style)

    TableName = "Test" & I
    TimeNotAvailable = "Time" & I

    I += 1
    LocationButton.Style = style

    TableID.Content = TableName
    TimeID.Content = TimeNotAvailable

    LayoutGrid.Children.Add(LocationButton)
    AddHandler LocationButton.Click, AddressOf LocationButtonClicked
End Sub

Every time a "Create Button" button is pressed, a button will be generated based on the template. However I am not able to set the textblock.text TableID and TimeID. When creating the buttons I need the tableID and TimeID to get the value of a variable. Like "Table 1", "Table 2" etc.

I tried all different type of bindings, resources etc but binding would change the text in all buttons, first button text would be "Table 1" but when generating the second both buttons would be "Table 2". I also tried DataContext but the both textblocks would have the same data.

I tried creating a button directly in xaml and "TableID.Content = TableName" worked but when using the template "TableID" is not recognized.

Please some assistance. Thanks

Answer 1

As a quick solution you can try this workaround

Add binding to the Text property as follows

             <TextBlock x:Name='TableID'
                        FontSize="12" 
                        HorizontalAlignment="Center"
                        FontWeight="Bold"
                        Margin="0,25,0,0"
                        Text="{Binding [0], FallbackValue=Table_New}"/>
             <TextBlock x:Name='TimeID'
                        FontSize="12" 
                        HorizontalAlignment="Center"
                        Margin="0,65,0,0"    
                        Text="{Binding [1], FallbackValue=Time_New}" />

and replace following

TableID.Content = TableName
TimeID.Content = TimeNotAvailable

with

LocationButton.DataContext = { TableName, TimeNotAvailable }

The above example demonstrates MVVM way of displaying data on the UI.

Explanation

{ TableName, TimeNotAvailable } creates and an implicit array which passed as DataContext to the button then it is used in binding with indexers where [0] is first element and [1] being the second.