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

如果手动设置高度，则渐变似乎有效。看来你的高度元素绑定也没有像你期望的那样工作。

我测试了你的Canvas，高度为300，矩形高度为200，并且在美学上与文本块的高度没什么差别。对于画布和矩形，两个渐变都很好。

Answer 3

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

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

画布背景颜色不显示

3 个答案: