WPF Dynamically add buttons with different multiple text - wpf

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.