Canvas Background color not showing

Question

I created a UserControl to display a popup using a TextBlock within a Canvas. Everything seems to be working OK, except for the background color of the canvas. It is being rendered as transparent no matter what I try. I also tried adding a Rectangle and filling it but that isn't working either. Here's the code:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
             xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
             xmlns:System="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d"
             x:Class="PopupText.CanvasPopup"
             d:DesignWidth="456"
             d:DesignHeight="129">

  <StackPanel x:Name="LayoutRoot"
              Orientation="Horizontal">

        <!--This button toggles the visibility of the popup-->
    <Button x:Name="ActivateButton"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            BorderThickness="0"
            Click="OnActivateButtonClicked">

      <Image Source="/pushpin.png"
             Width="36"
             Height="36"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             Stretch="Fill"
             Margin="0" />

    </Button>

    <Canvas x:Name="PopupContainer"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Width="{Binding Width, ElementName=PopupText}"
            Height="{Binding Height, ElementName=PopupText}"
            Visibility="Collapsed">
      <Canvas.Background>
        <LinearGradientBrush EndPoint="0.5,1"
                             StartPoint="0.5,0">
          <GradientStop Color="Black"
                        Offset="0" />
          <GradientStop Color="#7FA79797"
                        Offset="1" />
        </LinearGradientBrush>
      </Canvas.Background>
      <Rectangle Canvas.Left="0"
                 Canvas.Top="0"
                 RadiusX="20"
                 RadiusY="20"
                 Width="{Binding Width, ElementName=PopupText}"
                 Height="{Binding Height, ElementName=PopupText}">
        <Rectangle.Fill>
          <LinearGradientBrush EndPoint="0.5,1"
                               StartPoint="0.5,0">
            <GradientStop Color="Black"
                          Offset="0" />
            <GradientStop Color="#7F67749D"
                          Offset="1" />
          </LinearGradientBrush>
        </Rectangle.Fill>
        <Rectangle.Stroke>
          <LinearGradientBrush EndPoint="0.5,1"
                               StartPoint="0.5,0">
            <GradientStop Color="Black"
                          Offset="0" />
            <GradientStop Color="#7FC89B9B"
                          Offset="1" />
          </LinearGradientBrush>
        </Rectangle.Stroke>
      </Rectangle>
      <TextBlock x:Name="PopupText"
                 Text="A really long line of text that will either overflow or wrap"
                 TextWrapping="Wrap"
                 Width="350"
                 Canvas.Left="0"
                 Canvas.Top="0" />
    </Canvas>
  </StackPanel>
</UserControl>

Thanks for your help!

Answer 1

It looks like you want to bind the size of the Canvas to the actual size of the TextBlock not the values specified at design-time.

In that case, use a binding like this:

Width="{Binding ActualWidth, ElementName=PopupText}"
Height="{Binding ActualHeight, ElementName=PopupText}">

Answer 2

Your gradients appear to work if you set height manually. It would appear your height element binding isn't working as you expect it too.

I tested your Canvas in isolation with height 300, Rectangle height 200 and it didn't make much difference aesthetically what the height of the textblock was. Both the gradients worked fine, for the canvas and the rectangle.