Canvas background is ignored when inside VisualBrush

Question

Given this XAML:

<Style TargetType="PasswordBox"> <Setter Property="Background"> <Setter.Value> <VisualBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute"> <VisualBrush.Visual> <Canvas Background="{x:Static SystemColors.WindowBrush}"> <Path Data="M0,0 L10,10 M0,10 L10,0"> <Path.Stroke> <SolidColorBrush Color="{x:Static SystemColors.HighlightColor}"/> </Path.Stroke> </Path> </Canvas> </VisualBrush.Visual> </VisualBrush> </Setter.Value> </Setter> ... 

The background of the canvas is ignored, and instead the path is seen above the background, which is transparent to the form behind the PasswordBox. So where should I set the "background for background"?

Answer 1

The problem is that the Canvas has no size.

Change this and you will see the following:

 <Canvas Background="{x:Static SystemColors.WindowBrush}" Width="10" Height="10"> 

To reduce the number of references to these dimensions, you can declare them as resources. Since you are dealing with squares, you can reduce it to a single value:

  <Grid.Resources> <System:Double x:Key="Width">10</System:Double> <System:Double x:Key="Height">10</System:Double> <Style TargetType="PasswordBox"> <Setter Property="Background"> <Setter.Value> <VisualBrush TileMode="Tile" ViewportUnits="Absolute"> <VisualBrush.Viewport> <Rect Width="{StaticResource Width}" Height="{StaticResource Height}" /> </VisualBrush.Viewport> <VisualBrush.Visual> <Canvas Background="{x:Static SystemColors.WindowBrush}" Width="{StaticResource Width}" Height="{StaticResource Height}" > 

Of course, if you snap to a view model, you can also control dimensions through snapping.