使用 C# 在 WPF 中动态添加图像上的文本答案

【问题标题】：Add text on image dynamically in WPF with C#使用 C# 在 WPF 中动态添加图像上的文本
【发布时间】：2019-03-30 17:19:31
【问题描述】：

我正在尝试在图片中实现以下目标。在列表中，我想根据某些条件在代码中动态地将文本“WS1”、“WS2”、“WS3”放到图像上。我在 xaml 中设置了一些东西。我不确定这是否可行以及如何编写代码以匹配 xaml。

       <Style x:Key="AnnotationStyle" TargetType="TextBlock">
        <Setter Property="Background" Value="#70FFFFFF" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
    </Style>
    <DataTemplate x:Key="DisplayImage">
        <StackPanel Width="50">
            <StackPanel Orientation="Horizontal">
                <Image Height="40" Source="{Binding ImageData}" />
                <TextBlock Text="{Binding Description}" Style="{StaticResource AnnotationStyle}"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

 <ListView.View>
     <GridView>
         <GridViewColumn CellTemplate="{StaticResource checkbox}"/>
         <GridViewColumn Header="Profile ID" DisplayMemberBinding="{Binding ProfileID}"/>
                <GridViewColumn Header="Monitor 1" DisplayMemberBinding="{Binding DisplayImage}">
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

如何在代码中实现这一点，这个 xaml 是否有效？非常感谢你。

【问题讨论】：

类似问题在这里回答：stackoverflow.com/questions/24431538/…
我试过这个。下的出现错误，你知道为什么吗？我正在使用列表视图，与列表框有什么区别？我认为不会。
你应该使用DataTemplate，看看我的回答
我找到了解决我的问题的answer。

标签： c# wpf image xaml testing

【解决方案1】：

 <ListView>
        <ListView.View>
            <GridView>
                <GridViewColumn>
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <CheckBox />
                            </Grid>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn
                    Width="50"
                    DisplayMemberBinding="{Binding ProfileID}"
                    Header="Profile ID" />
                <GridViewColumn Width="90" Header="Monitor 1">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Image
                                    Width="50"
                                    Height="40"
                                    Source="{Binding DisplayImage}" />
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Text="{Binding Text1}" />
                            </Grid>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Width="90" Header="Monitor 2">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Image
                                    Width="50"
                                    Height="40"
                                    Source="{Binding DisplayImage}" />
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Text="{Binding Text2}" />
                            </Grid>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Width="90" Header="Monitor 3">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Image
                                    Width="50"
                                    Height="40"
                                    Source="{Binding DisplayImage}" />
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Text="{Binding Text3}" />
                            </Grid>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

【讨论】：

乌斯曼，感谢您的建议。我想在图像顶部显示文本。这个在图像旁边，不适合我的项目
@briswill 你试过这个吗？ TextBlock 与 Image 在同一个 Grid 单元格中居中。