画布背景颜色不显示

Question

我创建了一个 UserControl 来使用 Canvas 中的 TextBlock 显示弹出窗口。除了画布的背景颜色之外，一切似乎都工作正常。无论我如何尝试，它都会呈现为透明。我还尝试添加一个矩形并填充它，但这也不起作用。代码如下：

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

感谢您的帮助！

Answer 1

看起来您想要将 Canvas 的大小绑定到 TextBlock 的实际大小，而不是设计时指定的值。

在这种情况下，请使用如下绑定：

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

Answer 2

如果您手动设置高度，您的渐变似乎会起作用。看起来您的高度元素绑定也没有按照您的预期工作。

我单独测试了 Canvas 的高度为 300，矩形高度为 200，文本块的高度在美学上没有太大差异。对于画布和矩形，这两种渐变效果都很好。

Answer 3

您将画布和矩形的高度属性绑定到文本块的高度属性，但文本块具有“自动”高度属性。因此，XAML 无法为这些元素分配高度值。尝试手动设置文本块的高度，而不是自动设置。这将立即影响其他两个元素。

PS 如果从文本块中删除 Width="350"，则画布和矩形在堆栈面板上的高度和宽度将为 0。您需要手动设置文本块的高度和宽度属性，因为其他两个元素依赖于它。