[WPF] layout in VisualBrush, wpfvisualbrush

[WPF] layout in VisualBrush, wpfvisualbrush

Insert an article today. Let's talk about a layout problem we encountered last Friday. The problem is probably like this: you need to add a transparent background image to a fast area. because the area is large and the width and height are not fixed, the image is small, so the image needs to be centered. In addition, you also need to add a non-transparent solid color to the transparent part of the image.

For example, the final result is shown in:

Of courseTo achieve this effectThere are multiple implementation solutions, at least three categories:

1. Nest two controls and apply the solid color and center image respectively.

2. Use VisualBrush to apply the combination effect to the Background of the same control.

3. Override the control and draw the combination effect on the Background.

 

I am talking about the second solution today: VisualBrush, this powerful Brush class, which can convert any Visual element into a Brush.

 

The code I wrote for the first time is as follows:

<Grid Background = "White"> <Grid. rowDefinitions> <RowDefinition Height = "100"/> <RowDefinition Height = "*"/> <RowDefinition Height = "100"/> </Grid. rowDefinitions> <Grid. columnDefinitions> <ColumnDefinition Width = "100"/> <ColumnDefinition Width = "*"/> <ColumnDefinition Width = "100"/> </Grid. columnDefinitions> <Border Grid. row = "1" Grid. column = "1"> <Border. background> <VisualBrush. visual> <Border Background = "#455C73"> <Image Width = "20" Height = "20" HorizontalAlignment = "Center" verticalignment = "Center" Source = "img_xiaofangzi.png"/> </Border> </VisualBrush. visual> </VisualBrush> </Border. background> </Border> </Grid>Code written for the first time

It seems that there should be no big problem, the effects may be unsatisfactory, and the Image is stretched (and the width and height of the Image are invalid ):

Seeing this effect, my first instinct was to apply Stretch = "None" on VisualBrush ":

<Grid Background = "White"> <Grid. rowDefinitions> <RowDefinition Height = "100"/> <RowDefinition Height = "*"/> <RowDefinition Height = "100"/> </Grid. rowDefinitions> <Grid. columnDefinitions> <ColumnDefinition Width = "100"/> <ColumnDefinition Width = "*"/> <ColumnDefinition Width = "100"/> </Grid. columnDefinitions> <Border Grid. row = "1" Grid. column = "1"> <Border. background> <VisualBrush Stretch = "None"> <VisualBrush. visual> <Border Background = "#455C73"> <Image Width = "20" Height = "20" HorizontalAlignment = "Center" verticalignment = "Center" Source = "img_xiaofangzi.png"/> </Border> </VisualBrush. visual> </VisualBrush> </Border. background> </Border> </Grid>Modified code

Again unexpected:

Format: The Border size in VisualBrush does not fill the entire background color. In addition, the size of the Border is the same as that of the Image. For example, the width and height of the Image are 20*20 larger than that of the Image.

After setting the width and height for Broder, the effect was satisfactory. Final code:

<Grid Background = "White"> <Grid. rowDefinitions> <RowDefinition Height = "100"/> <RowDefinition Height = "*"/> <RowDefinition Height = "100"/> </Grid. rowDefinitions> <Grid. columnDefinitions> <ColumnDefinition Width = "100"/> <ColumnDefinition Width = "*"/> <ColumnDefinition Width = "100"/> </Grid. columnDefinitions> <Border Grid. row = "1" Grid. column = "1"> <Border. background> <VisualBrush Stretch = "None"> <VisualBrush. visual> <Border Width = "3000" Height = "3000" Background = "#455C73"> <Image Width = "20" Height = "20" HorizontalAlignment = "Center" verticalignment = "Center" Source = "img_xiaofangzi.png"/> </Border> </VisualBrush. visual> </VisualBrush> </Border. background> </Border> </Grid>Final code

Of course, the code is still not perfect: because the size of the background area is not fixed, a large width and height are set.

 

After the problem is solved, let's look back at the layout in VisualBrush,Because the parent level of Visual in VisualBursh is VisualBrush, it cannot provide the size of the root element in Visual. Therefore, if Stretch = "None" is applied ", you need to manually set the size of the Visual root element.. This can also be confirmed on MSDN.