ItemControl background color

问题:

In a fresh Universal Windows Platform app, I am trying to set the Background of an ItemsControl. But it doesn't seem to do anything. The only changes I've made to the VS template are in MainPage.xaml, which now looks like this:

<Page
    x:Class="UWPPlayground.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPPlayground"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" x:Name="Hello">
  <Grid Background="Blue">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*">

      </ColumnDefinition>
      <ColumnDefinition Width="*">

      </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ItemsControl Grid.Row="0" Grid.Column="0" Width="60" Height="30" Foreground="Wheat" Background="White">
      <TextBlock Text="Hello World!"></TextBlock>
      <TextBlock Text="Can you see this?"></TextBlock>
    </ItemsControl>
    <Grid Grid.Row="0" Grid.Column="1" Background="Purple"></Grid>
    </Grid>
</Page>

The result is shown below. The Foreground property of the ItemsControl seems to be working just fine, as the TextBlocks have wheat-colored text. Due to the small size of the control, the text is cut-off, as expected. The Background, however, is not visible. What am I missing?

回答1:

ItemsControl inherits from Control, which defines lots of visual properties at the base class level which do not necessarily influence the appearance of the control directly. These properties are usually referenced via TemplateBindings in the ControlTemplate, which then gives rise to the desired appearance. Whether or not the template uses these properties determines whether or not they have any use at all.

You'll notice that changing a UserControl's background also does nothing (for the same reason mentioned above).

Non-control classes like Grid, Rectangle, Border (etc) do honor such properties out of the box, since these are the elements typically used in the templates of controls to produce a certain appearance.

The reason why ItemsControl-derived classes (like ListView) do honor the background property is because some root-level element in its template references the Background property (via TemplateBinding). ItemsControl on its own has no template.

I think the reason why the Foreground property works is because it will inherit its value from the parent. (Some dependency properties can inherit their values like this).

The easiest way to set a background for your ItemsControl would be to wrap it in a Border (or Grid, they're essentially the same now) and set a background brush on that instead.

I don't recommend you do what follows for your example, but this is what you would need to do if you wanted the Background property to work:

<ItemsControl Background="Red">
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <Grid Background="{TemplateBinding Background}">
                <ItemsPresenter/>
            </Grid>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>