c# - 如何在 UWP 中更改列表框项目(文本块)的背景
问题描述
当尝试更改作为 ListBox 的 DataTemplate 一部分的 TextBlock 的背景时,背景仅围绕文本而不是整个块
在 UWP TextBlock 中没有背景属性,所以我将它包装在边框中并更改了边框的背景,如下所示:
<ListBox x:Name="BitsListView" ItemsSource="{x:Bind BitsList, Mode=TwoWay}" Loaded="BitsListView_Loaded"
HorizontalAlignment="Left" IsEnabled="{x:Bind IsWriteAccess,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectionChanged="BitsListView_SelectionChanged " SelectionMode="Single">
<ListBox.ItemTemplate>
<DataTemplate>
<Border>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="BitText" Text="{Binding}" Loaded="BitText_Loaded" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
并且颜色在 OnLoaded 事件中发生变化,如下所示:
private void BitText_Loaded(object sender, RoutedEventArgs e)
{
TextBlock bitText = sender as TextBlock;
StackPanel sp = bitText.Parent as StackPanel;
Border border = sp.Parent as Border;
if ((int)bitText.DataContext == 1)
{
bitText.Foreground = new SolidColorBrush(Windows.UI.Colors.LightGreen);
border.Background = new SolidColorBrush(Windows.UI.Colors.DarkGreen);
}
else
{
bitText.Foreground = new SolidColorBrush(Windows.UI.Colors.Gray);
border.Background = new SolidColorBrush(Windows.UI.Colors.LightGray);
}
}
但结果是这样的: https ://pasteboard.co/IlcZB1J.png
我想要实现的是这样的:(不要介意糟糕的 MSPaint 工作)
https://pasteboard.co/Ild1plp.png
我试图解决这个问题的方法是用边框包裹堆栈面板,但这没有帮助。然后我尝试包装数据模板,但这是不可能的,进一步爬上树改变背景无法正常工作,显然改变 ListBox 的背景会绘制整个列表,我只需要具有 1 的块完整地绘制,而不仅仅是围绕文本的一点点
解决方案
对于您的问题,您不需要使用边框来包装 StackPanel,它不起作用。您只需要定义一个样式ListBoxItem
并将其应用于ItemContainerStyle
和设置HorizontalContentAlignment=Stretch
。
在这里,我检查了您的代码。我有一些建议给你。在 UWP 中,您可以通过绑定完成大多数事情。这意味着您无需在页面的代码隐藏中从 DataTemplate 中查找特定控件并设置其属性值。这不是最佳做法。相反,您可以定义一个包含三个属性(文本、背景、前景)的自定义类。然后,您可以绑定到 XAML 页面上的这些属性。
完整的代码示例如下:
<ListView x:Name="BitsListView" ItemsSource="{x:Bind BitsList, Mode=TwoWay}"
HorizontalAlignment="Left" SelectionMode="Single">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Padding" Value="0"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Test">
<StackPanel Background="{x:Bind backGround}">
<TextBlock x:Name="BitText" Text="{x:Bind content}" Foreground="{x:Bind foreGround}" HorizontalTextAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
public class Test : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private int _content;
public int content
{
get { return _content; }
set
{
if (_content != value)
{
_content = value;
if (value == 1)
{
foreGround = new SolidColorBrush(Colors.LightGreen);
backGround = new SolidColorBrush(Colors.DarkGreen);
}
else
{
foreGround = new SolidColorBrush(Colors.Gray);
backGround = new SolidColorBrush(Colors.LightGray);
}
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("content"));
}
}
}
private SolidColorBrush _backGround;
public SolidColorBrush backGround
{
get { return _backGround; }
set
{
if (_backGround != value)
{
_backGround = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("backGround"));
}
}
}
private SolidColorBrush _foreGround;
public SolidColorBrush foreGround
{
get { return _foreGround; }
set
{
if (_foreGround != value)
{
_foreGround = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("foreGround"));
}
}
}
}
public sealed partial class MainPage : Page
{
private ObservableCollection<Test> BitsList { get; set; }
public MainPage()
{
this.InitializeComponent();
BitsList = new ObservableCollection<Test>();
for (int i = 0; i < 10; i++)
{
Random random = new Random();
BitsList.Add(new Test() { content = random.Next(0, 9) });
}
}
}
推荐阅读
- reactjs - Codesandbox “Preview on edit”不适用于 Aurelia,但适用于其他框架和原生 HTML
- java - 如何使 module-info.java 保持最新
- jquery - 当我在申请中使用凭据调用 HTTP.GET 时,角度 6 中的标题不起作用
- laravel - 如何通过具有最具体的关系来排序 Eloquent 中的行?
- c - C - 查找元素的频率失败,数字为 0
- javascript - 2 个具有最小和最大日期的依赖日期选择器
- c# - 从 EF 中的集合中删除项目 - 奇怪的问题
- r - 在 CentOS 的 fftwtools 上安装 R 包需要 fftw3
- android - 从 Webview 调用时,Admob 插页式广告不可点击
- yii2 - Yii2 GridView如何使用GET参数创建链接到数组ModelSearch