WPF动态添加具有不同多个文本的按钮

Question

我为按钮创建了一个模板：

        <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

每按一次“创建按钮”按钮，就会根据模板生成一个按钮。 但是我无法设置 textblock.text TableID 和 TimeID。 创建按钮时，我需要 tableID 和 TimeID 来获取变量的值。如“表一”、“表二”等

我尝试了所有不同类型的绑定、资源等，但绑定会更改所有按钮中的文本，第一个按钮文本将是“表 1”，但在生成第二个按钮时，两个按钮都是“表 2”。我也试过 DataContext 但两个文本块会有相同的数据。

我尝试直接在 xaml 中创建一个按钮，“TableID.Content = TableName”有效，但使用模板时“TableID”无法识别。

请帮忙。谢谢

Answer 1

作为一种快速解决方案，您可以尝试此解决方法

如下添加绑定到 Text 属性

             <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}" />

并替换以下

TableID.Content = TableName
TimeID.Content = TimeNotAvailable

与

LocationButton.DataContext = { TableName, TimeNotAvailable }

上面的例子演示了在 UI 上显示数据的 MVVM 方式。

解释

{ TableName, TimeNotAvailable } 创建一个隐式数组，该数组作为 DataContext 传递给按钮，然后用于与索引器绑定，其中 [0] 是第一个元素，[1] 是第二个元素。