Цвет фона холста не отображается

Question

Я создал UserControl для отображения всплывающего окна, используя TextBlock внутри Canvas. Кажется, все работает нормально, за исключением цвета фона холста. Это делается прозрачным, что бы я ни пытался. Я также попытался добавить Rectangle и заполнить его, но это тоже не работает. Вот код:

<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

Ваши градиенты будут работать, если вы установите высоту вручную. Может показаться, что привязка элемента высоты не работает, как вы ожидаете.

Я тестировал ваш холст изолированно с высотой 300, высотой прямоугольника 200, и эстетически не имело значения, какой была высота текстового блока. Оба градиента отлично работали для холста и прямоугольника.

Answer 3

Вы привязываете свойство высоты холста и прямоугольника к текстовому блоку, но у текстового блока есть свойство высоты "auto".По этой причине XAML не может присвоить значение высоты этим элементам.Попробуйте установить высоту текстового блока вручную, а не автоматически.Это сразу же повлияет на два других элемента.

PS Если вы удалите Width = "350" из текстового блока, то холст и прямоугольник будут иметь 0 высоту и ширину на панели стека.Вам необходимо установить свойства высоты и ширины текстового блока вручную, так как от него зависят два других элемента.