キャンバスの背景色が表示されない

Question

の中にTextBlockを使用してポップアップを表示するようにUserControlを作成しました。キャンバスの背景色を除いて、すべてが正常に機能しているようです。私が何を試しても、それは透明でレンダリングされています。私も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

キャンバスと矩形のheightプロパティをtextblockのheightプロパティにバインドしていますが、textblockのheightプロパティはautoです。そのため、XAMLでは要素に高さ値を割り当てることができません。自動的にではなく、手動でテキストブロックの高さを設定してみてください。これは他の2つの要素にすぐに影響します。

P.S.テキストブロックからWidth = "350"を削除すると、キャンバスと四角形の高さと幅はスタックパネルに0になります。他の2つの要素がそれに依存するので、テキストブロックの高さと幅のプロパティを手動で設定する必要があります。