Canvas background color not displayed

Question

I created a UserControl to display a popup using a TextBlock within a Canvas . Everything seems to be working fine except for the background color of the canvas. This is made transparent no matter what I try to do. I also tried adding a Rectangle and filling it in, but that doesn't work either. Here is 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> 

Thank you for your help!

Answer 1

It looks like you want to associate the Canvas size with the actual TextBlock size, and not with the values ​​specified at design time.

In this case, use the binding as follows:

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

Answer 2

Your gradients will work if you set the height manually. Apparently your height element binding does not work as you expect.

I checked your canvas in isolation with a height of 300, a height of a rectangle of 200, and it didn't really matter how tall the text block was. Both gradients worked great for canvas and rectangle.

Answer 3

You bind the height property to the canvas and the rectangle to the textblock element, but the text block has the "auto" height property. For this reason, XAML cannot assign a height value to these elements. Try setting the height of the text block manually rather than automatically. This will immediately affect the other two elements.

PS If you remove Width = "350" from the text block, the canvas and rectangle will have a height and width of 0 on the stack panel. You need to set the height and width properties of the text block manually, since two other elements depend on it.