WPF将背景设置为透明和在控件上设置不透明度有什么区别？

Question

So I realized that my graph viewer had the axis displaying over the actual items in the graph, so I changed the ZIndex on the grid to display the items over the axis instead.

However, I noticed that I couldn't actually see anything under the actual items because the background of the items were opaque. I think I have two options then, to either set the background of the items to transparent, or to set the opacity of the items. Is there any difference between these two options?

              <Grid 
                Grid.Row="0" 
                Grid.RowSpan="2"
                Grid.Column="0" 
                Grid.ZIndex="1"
                >
                <Components:SignalGraphAxis 
                  x:Name="signal_axis"
                  VerticalAlignment="Stretch"
                  HorizontalAlignment="Stretch"
                  GraphHeight="{Binding Path=GraphHeight}"
                  PenColor="{Binding Path=AxisColor, Mode=OneWay}"
                  PenWidth="{Binding Path=GraphPenWidth, Mode=OneWay}"
                  MinHeight="10"
                  MinWidth="10"
                  AxisTimeScale="{Binding Path=GraphTimeScale}"
                  NumberOfPixelsPerDivision="{Binding Path=NumberOfPixelsPerDivision, Mode=OneWay}"
                  MinDisplayValue ="{Binding Path=MinDisplayValue, Mode=OneWay}"
                  UnitsOfGraphTimePerInch="{Binding Path=UnitsOfTimePerInch, Mode=OneWay}"
                  />
              </Grid>
              <ScrollViewer
                x:Name="signal_scrollviewer"
                Grid.Row="1"
                Grid.RowSpan="2"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Grid.ZIndex="2"
                VerticalAlignment="Stretch" 
                HorizontalAlignment="Stretch"
                HorizontalContentAlignment="Left"
                HorizontalScrollBarVisibility="Visible"
                VerticalScrollBarVisibility="Visible"
                CanContentScroll="True"
                Style="{StaticResource SignalScrollViewerStyle}"
                >

                <ItemsPresenter />
              </ScrollViewer>
            </Grid>

Answer 1

Background property is defined on Control class and Opacity is defined much higher on UIElement .

From MSDN Page Control.Background Property

This property only affects a control whose template uses the Background property as a parameter. On other controls, this property has no impact.

Let's try to create a Custom Control to see how this works.

CustomControl1.cs

public class CustomControl1 : ContentControl
{
    static CustomControl1()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl1), new FrameworkPropertyMetadata(typeof(CustomControl1)));
    }
}

Default Template For CustomControl1

<Style TargetType="{x:Type local:CustomControl1}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Text="My Custom Control " Grid.Row="0" />
                    <ContentPresenter Grid.Row="1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Please note, the above template doesn't use Background property at all in it's Template .

Now, Let's try to use that in a Form and see how it behaves:

Code from Window1.xaml

<Grid>
    <wpfApplication5:CustomControl1 Background="Green">
        <Button Content="Button Within Custom Control" Margin="25"/>
    </wpfApplication5:CustomControl1>
</Grid>

The resultant output:

See, there was no Green background for the rendered CustomControl even though we set the Background to Green in Window1.xaml.

Now, Lets modify the template to use Background property.

Template with Background Property

<Style TargetType="{x:Type local:CustomControl1}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Text="My Custom Control " Grid.Row="0" />
                    <ContentPresenter Grid.Row="1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And the resultant output will now have a the specified background applied.

I think (couldn't find any references though), Opacity gets applied to the element/Control whether the Control's Template worry about Opacity property or not.

Window1.xam with Opacity Set on CustomControl

<Grid>
    <wpfApplication5:CustomControl1 Background="Green" Opacity="0.2">
        <Button Content="Button Within Custom Control" Margin="25"/>
    </wpfApplication5:CustomControl1>
</Grid>

and resultant Output

See, the Opacity got applied even though our Custom Control's template doesn't worry anything about Opacity property.

Finally, to answer your question: Though either setting Opacity to 0 or Background to Transparent may give you the same visual result. But, for Background property, it totally depends on the Control implementation and how it handles Background property. Whereas, with Opacity it gets applied from parent elements to down the elements tree to child elements irrespective of the control.

Refer to MSDN Page, UIElement.Opacity Property to read more on Opacity property and how it behaves when Opacity is set at multiple levels in an element tree.