WPF: Make background of Canvas transparent

Question

I am building a user control which has 4 Canvas in a 2x2 grid. When I set the background of the grid to a color, the color change around the canvases, but the background of the canvases stays white.

How can I make it so that the background of the group of canvas is transparent and I can see the background of the grid? I found some explanation here, but there is no code and I don't understand how to get it to work.

EDIT: Here is the XAML code. As you can see I tried setting <Canvas IsItemsHost="True" Background="{x:Null}"/> for the canvas of the last ListBox in the code, which does not work. Setting Background="Transparent" doesn't work either.

<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>

Why would a Canvas's Background change when you set its Parent's Background? — nkoniishvt, Jan 15 '16 at 13:40
Well I am not sure. I am still very fresh to WPF. But like I said, the background of the area containing the canvas' are white and I do not know how to change that. — packoman, Jan 15 '16 at 13:42
@nkoniishvt Ok. I tried your suggestion, but it is not working. I perhaps forgot a major point: The canvases are the the `ItemsPanelTemplate` of a ListBox! Perhaps that is the difference?! — packoman, Jan 15 '16 at 13:45
@packoman set your ListBox, ListBoxItem & Canvas Background to Transparent — nkoniishvt, Jan 15 '16 at 14:11
@nkoniishvt Ok. That did the trick! If you'd formulate your comment as an answer I would love to accept it. Thanks! — packoman, Jan 15 '16 at 14:20

score 5 · Answer 1 · answered Jan 15 '16 at 13:46

If you are using WPF there is a xaml file for your window that contains xaml write up with your canvas and grid. Setting the canvas tag with either of the following properties will set the background of the canvas to transparent.

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

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

nkoniishvt · Accepted Answer · 2016-01-15T14:09:51.513

0

Background DP default value is null. When a Background is set to null the displayed Color is White and mouse interactions don't work. You need to set Canvas's, ListBox's and ListBoxItem's Background to Transparent to see the Background of the Parent Control.

edited Jan 15 '16 at 14:09

answered Jan 15 '16 at 13:45

nkoniishvt

2,442
1
14
29

WPF: Make background of Canvas transparent

2 Answers2