Question

当尝试更改属于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设为完整地绘制，而不仅仅是在文字周围

Answer 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) });
        }
    }
}

如何在UWP中更改列表框项目（文本块）的背景

1 个答案: