Question

我正在构建一个用户控件，它在2x2网格中有4个Canvas。当我将网格的背景设置为一种颜色时，画布周围的颜色会发生变化，但画布的背景会保持白色。

我怎样才能使画布组的背景透明，我可以看到网格的背景？我找到了一些解释here，但没有代码，我不明白如何让它工作。

修改：这是XAML代码。正如您所看到的，我尝试将<Canvas IsItemsHost="True" Background="{x:Null}"/>设置为代码中最后一个ListBox的画布，但这不起作用。设置Background="Transparent"也不起作用。

<UserControl x:Class="ProgramEditor.objectPresenter.objectPresenter"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:sys="clr-namespace:System;assembly=mscorlib"
         xmlns:objectPresenter="clr-namespace:ProgramEditor.objectPresenter"
         xmlns:behavior="clr-namespace:RubberBand;assembly=RubberBand"
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
         xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"
         d:DataContext="{d:DesignInstance objectPresenter:objectViewModel, IsDesignTimeCreatable=True}"
         mc:Ignorable="d"
         d:DesignHeight="450" d:DesignWidth="700">

<UserControl.Resources>
    <sys:Double x:Key="objectWidth">610</sys:Double>
    <sys:Double x:Key="objectHeight">365</sys:Double>

    <objectPresenter:HorizontalValueConverter x:Key="horizontalValueConverter" />
    <objectPresenter:VerticalValueConverter x:Key="verticalValueConverter" />

    <Style x:Key="RowColumnSelector" TargetType="TextBlock">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsSelected}" Value="True">
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </DataTrigger>
        </Style.Triggers>
        <Setter Property="Cursor" Value="Hand"/>
    </Style>
    <DataTemplate DataType="{x:Type objectPresenter:TargetSelector}">
        <TextBlock Width="{Binding HorizontalSize, Converter={StaticResource horizontalValueConverter}, ConverterParameter={StaticResource objectWidth}}"
               Height="{Binding VerticalSize, Converter={StaticResource verticalValueConverter}, ConverterParameter={StaticResource objectHeight}}"
               Text="{Binding Name}"
               Style="{StaticResource RowColumnSelector}">
        </TextBlock>
    </DataTemplate>

    <DataTemplate DataType="{x:Type objectPresenter:Target}">
        <Ellipse Fill="{Binding Color}"
                 Width="{Binding HorizontalSize, Converter={StaticResource horizontalValueConverter}, ConverterParameter={StaticResource objectWidth}}"
                 Height="{Binding VerticalSize, Converter={StaticResource verticalValueConverter}, ConverterParameter={StaticResource objectHeight}}"
                 Stroke="Black"
                 StrokeThickness="3"
                 Canvas.Left="{Binding Path=XPos}"
                 Canvas.Top="{Binding Path=YPos}"
                 ToolTip="{Binding Name}"
                 SnapsToDevicePixels="True"
                 Cursor="Hand"
                 />
    </DataTemplate>
    <Style TargetType="Ellipse">
        <Setter Property="ToolTipService.InitialShowDelay" Value="0"/>
    </Style>
</UserControl.Resources>

<Grid Background="Blue">
    <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="{Binding Source={StaticResource objectWidth}}" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="{Binding Source={StaticResource objectHeight}}" />
        </Grid.RowDefinitions>

    <Button Grid.Column="0" Grid.Row="0">Hello</Button>

    <ListBox
                x:Name="ColumnSelectorListBox"
                BorderThickness="0"
                Width="{StaticResource objectWidth}"
                Height="50"
                ItemsSource="{Binding Path=ColumnSelectorCollection}"
                SelectionMode="Extended"
                Grid.Column="1" Grid.Row="0"
            >
        <i:Interaction.Behaviors>
            <behavior:RubberBandBehavior />
        </i:Interaction.Behaviors>

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas  IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Canvas.Left"
                            Value="{Binding XPos, Converter={StaticResource horizontalValueConverter},
                            ConverterParameter={StaticResource objectWidth}}"/>

                <Setter Property="Canvas.Top"
                            Value="{Binding YPos, Converter={StaticResource verticalValueConverter},
                            ConverterParameter={StaticResource objectHeight}}"/>
                <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                </Style.Resources>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

    <ListBox
            x:Name="RowSelectorListBox"
            BorderThickness="0"
            Grid.IsSharedSizeScope="True"
            Width="50"
            Height="{StaticResource objectHeight}"
            ItemsSource="{Binding Path=RowTargetSelectorCollection}"
            SelectionMode="Extended"
            Grid.Column="0" Grid.Row="1"
        >
        <i:Interaction.Behaviors>
            <behavior:RubberBandBehavior />
        </i:Interaction.Behaviors>

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas  IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Canvas.Left"
                            Value="{Binding XPos, Converter={StaticResource horizontalValueConverter},
                            ConverterParameter={StaticResource objectWidth}}"/>

                <Setter Property="Canvas.Top"
                            Value="{Binding YPos, Converter={StaticResource verticalValueConverter},
                            ConverterParameter={StaticResource objectHeight}}"/>
                <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                </Style.Resources>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

    <ListBox
            x:Name="WellListBox"
            BorderThickness="0"
            Width="{StaticResource objectWidth}"
            Height="{StaticResource objectHeight}"
            ItemsSource="{Binding Path=TargetCollection}"
            SelectionMode="Extended"
            Grid.Column="1" Grid.Row="1"
        >
        <i:Interaction.Behaviors>
            <behavior:RubberBandBehavior />
        </i:Interaction.Behaviors>

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas IsItemsHost="True" Background="{x:Null}"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Canvas.Left"
                        Value="{Binding XPos, Converter={StaticResource horizontalValueConverter},
                        ConverterParameter={StaticResource objectWidth}}"/>

                <Setter Property="Canvas.Top"
                        Value="{Binding YPos, Converter={StaticResource verticalValueConverter},
                        ConverterParameter={StaticResource objectHeight}}"/>
                <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                    <Style TargetType="Border">
                        <Setter Property="CornerRadius" Value="100"/>
                    </Style>
                </Style.Resources>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>
</Grid>

Answer 1

背景DP默认值为null。当Background设置为null时，显示的Color为White，鼠标交互不起作用。您需要将Canvas，ListBox和ListBoxItem的Background设置为Transparent以查看Parent Control的背景。

Answer 2

如果您使用的是WPF，则窗口中有一个xaml文件，其中包含使用画布和网格编写的xaml文件。使用以下任一属性设置canvas标记会将画布的背景设置为透明。

<!--Will be transparent but will catch click events--> 
<Canvas Background="Transparent"/>

<!--Will be transparent but won't catch click events--> 
<Canvas Background="{x:Null}"/>

WPF：使Canvas的背景透明

2 个答案: