<Window x:Class="WpfApp8.MainWindow"
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:local="clr-namespace:WpfApp8"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<VisualBrush
x:Name="brBrush"
x:Key="WaveBr"
TileMode="Tile"
Viewport="0,0,220,20" ViewportUnits="Absolute"
Viewbox="0,0,1,1" ViewboxUnits="RelativeToBoundingBox">
<!-- default of viewport and viewbox is relative-->
<!-- https://learn.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/tilebrush-overview?view=netframeworkdesktop-4.8 -->
<VisualBrush.Visual>
<Grid>
<Grid.Effect>
<BlurEffect Radius="0" /> <!-- are you want space? -->
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="LightCyan" />
<!-- 'C' needs three points -->
<!-- https://learn.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/path-markup-syntax?view=netframeworkdesktop-4.8#cubic-bezier-curve-command -->
<Path
Data="M0,10 C40,20 80,10 120,0 C160,20 200,10 220,10"
StrokeThickness="1"
Stroke="Teal"
Panel.ZIndex="1" />
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
<Grid Background="{StaticResource WaveBr}" />
</Window>
WPF VisualBrush won't paint on a grid background
I have a System.Windows.Media.VisualBrush with the source shown below. I then attempt to use it as the background for a grid. But my pattern don't appear. It should be something resembling ocean waves. Does anyone see anything wrong with what I wrote?
<VisualBrush
x:Name="brBrush"
x:Key="WaveBr"
Stretch="None"
TileMode="Tile"
Viewbox="40,0,120,20">
<VisualBrush.Visual>
<Grid>
<Grid.Effect>
<BlurEffect
Radius="2" />
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<Rectangle
Fill="LightCyan" />
<Path
Data="M0,10 C40,20 80,10 120,0 160,20 200, 10"
StrokeThickness="1"
Stroke="Teal"
Panel.ZIndex="1" />
</Grid>
</VisualBrush.Visual>
</VisualBrush>
5 answers
Sort by: Most helpful
-
gekka 9,666 Reputation points MVP
2021-03-13T06:23:32.8+00:00 -
Will Pittenger 306 Reputation points
2021-03-13T07:19:50.837+00:00 This is my latest version of that brush. I'm able to use it on other controls. Just not that grid. When I apply it to the TabItem, I find it in the header, not the body of the tab. See below the code. You'll note that instead of the sine wave pattern I was expecting, I get a couple of independent curves. The pattern isn't continuous. The viewport is an attempt to use just part of the pattern. The second curve was attempt to have the curve extend past the portion being used.
XML <VisualBrush x:Name="brBrush" x:Key="WaveBr" TileMode="Tile" Viewport="80,0,200,20" ViewportUnits="Absolute"> <VisualBrush.Visual> <Grid> <Grid.Effect> <BlurEffect Radius="10"/> </Grid.Effect> <Grid.RowDefinitions> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Rectangle Fill="LightCyan" /> <Path Data="M0,10 C40,20 80,10 120,0 C160,10 200,20 240,10" StrokeThickness="1" Stroke="Teal" Panel.ZIndex="1" /> </Grid> </VisualBrush.Visual> </VisualBrush>
-
DaisyTian-1203 11,626 Reputation points
2021-03-15T02:54:25.217+00:00 I changed the
Radius="10"
toRadius="0"
and setContentTemplate
for theTabItem
as below shown:<Window.Resources> <VisualBrush x:Name="brBrush" x:Key="WaveBr" TileMode="Tile" Viewport="80,0,200,20" ViewportUnits="Absolute"> <VisualBrush.Visual> <Grid> <Grid.Effect> <BlurEffect Radius="0"/> </Grid.Effect> <Grid.RowDefinitions> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Rectangle Fill="LightCyan" /> <Path Data="M0,10 C40,20 80,10 120,0 C160,10 200,20 240,10" StrokeThickness="1" Stroke="Teal" Panel.ZIndex="1" /> </Grid> </VisualBrush.Visual> </VisualBrush> </Window.Resources> <Grid> <TabControl TabStripPlacement="Top" Margin="0, 0, 0, 10"> <TabItem Name="backgroundcolor" Header="Background" > <TabItem.Resources> <Style TargetType="TabItem"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate DataType="{x:Type TabItem}"> <Border x:Name="grid" Background="{StaticResource WaveBr}"> <ContentPresenter Content="{Binding}" /> </Border> </DataTemplate> </Setter.Value> </Setter> </Style> </TabItem.Resources> <TabItem.Content>Background property information goes here.</TabItem.Content> </TabItem> <TabItem Name="bordercolor" Header="BorderColor"> <TabItem.Content>Border color property information goes here.</TabItem.Content> </TabItem> </TabControl> </Grid>
The result picture is:
If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. -
Will Pittenger 306 Reputation points
2021-03-15T21:22:13.983+00:00 Well, the blur was important to keep it from interfering with the foreground. There'll be a lot of stuff in front. I already noticed the blur was interfering with the what's desired. Also, I'm implementing a TabItem derived class that will hold this functionality. It won't be in the window.
The code below seems to do a good job of getting what I want, but only on the tab header. Not the rectangle that's in front.
XML <TabItem x:Class="BattleAnimator.Tab" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:BattleAnimator" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800" Background="{DynamicResource WaveBr}"> <TabItem.Header> <StackPanel Orientation="Horizontal"> <Label VerticalAlignment="Center" VerticalContentAlignment="Center" MaxWidth="397"> <Label.Content> <TextBlock x:Name="textDocTitle" TextTrimming="WordEllipsis" /> </Label.Content></Label> <Button x:Name="btnClose" Click="OnCloseClicked" ToolTip="Close this script" Style="{DynamicResource TabBarCloseBtn}" Background="{x:Null}">✘</Button> </StackPanel> </TabItem.Header> <TabItem.Resources> <VisualBrush x:Name="brWaves" x:Key="WaveBr" TileMode="Tile" Viewport="0,0,120,20" ViewportUnits="Absolute"> <VisualBrush.Visual> <Canvas Name="svg8" Width="41.854992" Height="5.3903913"> <Canvas.RenderTransform> <TranslateTransform X="0" Y="0" /> </Canvas.RenderTransform> <Canvas.Resources> <RectangleGeometry xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="clipPath3934" Rect="21.307501, 10.076149, 41.854992, 5.3903913" /> </Canvas.Resources> <!--Unknown tag: sodipodi:namedview--> <!--Unknown tag: metadata--> <Canvas Name="layer1"> <Canvas.RenderTransform> <TranslateTransform X="20.496686" Y="-4.7844821" /> </Canvas.RenderTransform> <Canvas Name="g4000" Clip="{StaticResource clipPath3934}"> <Canvas.RenderTransform> <TranslateTransform X="-41.804187" Y="-5.2916669" /> </Canvas.RenderTransform> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path3986" StrokeThickness="0.264583" Stroke="#008080"> <Path.Data> <PathGeometry Figures="m 21.166666 10.059367 c 7.143751 0 14.966886 -5.2916731 21.166667 -5.2916665 6.614585 7e-6 15.08125 5.2916665 21.166666 5.2916665" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3988" StrokeThickness="0.264583" Stroke="#008080"> <Path.Data> <PathGeometry Figures="m 21.166666 11.955547 c 7.143751 0 14.966886 -5.2916727 21.166667 -5.2916661 6.614585 7e-6 15.08125 5.2916661 21.166666 5.2916661" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3990" StrokeThickness="0.264583" Stroke="#008080"> <Path.Data> <PathGeometry Figures="m 21.166666 13.719436 c 7.143751 0 14.966886 -5.2916728 21.166667 -5.2916662 6.614585 7e-6 15.08125 5.2916662 21.166666 5.2916662" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3992" StrokeThickness="0.264583" Stroke="#008080"> <Path.Data> <PathGeometry Figures="m 21.166666 15.483325 c 7.143751 0 14.966886 -5.291673 21.166667 -5.291666 6.614585 7e-6 15.08125 5.291666 21.166666 5.291666" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3994" StrokeThickness="0.264583" Stroke="#008080"> <Path.Data> <PathGeometry Figures="m 21.166666 17.247214 c 7.143751 0 14.966886 -5.291673 21.166667 -5.291666 6.614585 7e-6 15.08125 5.291666 21.166666 5.291666" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3996" StrokeThickness="0.264583" Stroke="#008080"> <Path.Data> <PathGeometry Figures="m 21.166666 19.011103 c 7.143751 0 14.966886 -5.291673 21.166667 -5.291666 6.614585 7e-6 15.08125 5.291666 21.166666 5.291666" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3998" StrokeThickness="0.264583" Stroke="#008080"> <Path.Data> <PathGeometry Figures="m 21.166666 20.774992 c 7.143751 0 14.966886 -5.291673 21.166667 -5.291667 6.614585 8e-6 15.08125 5.291667 21.166666 5.291667" FillRule="EvenOdd" /> </Path.Data> </Path> </Canvas> </Canvas> </Canvas> </VisualBrush.Visual> </VisualBrush> </TabItem.Resources> <DockPanel> <StatusBar DockPanel.Dock="Bottom"> <Label Content="Frame # " VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" /> <Border Style="{DynamicResource StatusBarTextBlock}" VerticalAlignment="Center" HorizontalAlignment="Center"> <Label x:Name="textFrameNum" VerticalAlignment="Center" HorizontalAlignment="Center" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" /> </Border> <Label Content="of" /> <Border Style="{DynamicResource StatusBarTextBlock}" VerticalAlignment="Center" HorizontalAlignment="Center"> <Label x:Name="textFrameCnt" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" HorizontalAlignment="Center" /> </Border> <Separator Style="{DynamicResource ToolBarSep}" /> <Button x:Name="btnPrev" Content="Previous" Style="{DynamicResource ToolbarBtn}" VerticalAlignment="Center" VerticalContentAlignment="Center" /> <Button x:Name="btnPlay" Content="Play" Style="{DynamicResource ToolbarBtn}" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" /> <Button x:Name="btnNext" Content="Next" Style="{DynamicResource ToolbarBtn}" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" /> <Separator Style="{DynamicResource ToolBarSep}" /> <Label Content="Playback speed :" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" /> <Slider x:Name="sliderPlaySpeed" VerticalAlignment="Center" VerticalContentAlignment="Center" AutoToolTipPlacement="TopLeft" TickPlacement="Both" Value="1" Minimum="1" IsMoveToPointEnabled="True" IsSnapToTickEnabled="True" Width="200" Foreground="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" /> </StatusBar> <Separator DockPanel.Dock="Bottom" /> <ScrollViewer> <Viewbox> <Grid> <Grid.RowDefinitions> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Rectangle Fill="{DynamicResource WaveBr}"> <Rectangle.Effect> <BlurEffect /> </Rectangle.Effect> </Rectangle> <Image x:Name="imgMidBkg" Panel.ZIndex="1" /> <Canvas x:Name="canvasForeground" Panel.ZIndex="2" /> </Grid> </Viewbox> </ScrollViewer> </DockPanel> </TabItem>
-
Will Pittenger 306 Reputation points
2021-03-17T03:34:34.73+00:00 This is proving to be rather frustrating. The first example gives me a tab control with one tab containing an empty listbox. The second one displays only blank tabs. Can someone explain what the difference is?
XML <TabControl x:Name="sheetMain"> <TabItem> <ListBox /> </TabItem> </TabControl> XML <Window x:Class="BattleAnimator.MainWnd" 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:local="clr-namespace:BattleAnimator" mc:Ignorable="d" Title="Naval Battle Animator" Height="450" Width="800" WindowStyle="ToolWindow" ResizeMode="CanResizeWithGrip" WindowStartupLocation="CenterScreen" WindowState="Maximized" FontFamily="Times New Roman"> <Window.Resources> <VisualBrush x:Name="brWaves" x:Key="WaveBr" TileMode="Tile" Viewport="0,0,120,20" ViewportUnits="Absolute"> <VisualBrush.Visual> <Canvas Width="41.854992" Height="5.3903913"> <Canvas.RenderTransform> <TranslateTransform X="0" Y="0" /> </Canvas.RenderTransform> <Canvas.Resources> <RectangleGeometry xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="clipPath3934" Rect="21.307501, 10.076149, 41.854992, 5.3903913" /> </Canvas.Resources> <!--Unknown tag: sodipodi:namedview--> <!--Unknown tag: metadata--> <Canvas Name="layer1"> <Canvas.RenderTransform> <TranslateTransform X="20.496686" Y="-4.7844821" /> </Canvas.RenderTransform> <Canvas Clip="{StaticResource clipPath3934}" Background="LightCyan"> <Canvas.RenderTransform> <TranslateTransform X="-41.804187" Y="-5.2916669" /> </Canvas.RenderTransform> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path3986" StrokeThickness="0.264583" Stroke="Cyan"> <Path.Data> <PathGeometry Figures="m 21.166666 10.059367 c 7.143751 0 14.966886 -5.2916731 21.166667 -5.2916665 6.614585 7e-6 15.08125 5.2916665 21.166666 5.2916665" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3988" StrokeThickness="0.264583" Stroke="Cyan"> <Path.Data> <PathGeometry Figures="m 21.166666 11.955547 c 7.143751 0 14.966886 -5.2916727 21.166667 -5.2916661 6.614585 7e-6 15.08125 5.2916661 21.166666 5.2916661" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3990" StrokeThickness="0.264583" Stroke="Cyan"> <Path.Data> <PathGeometry Figures="m 21.166666 13.719436 c 7.143751 0 14.966886 -5.2916728 21.166667 -5.2916662 6.614585 7e-6 15.08125 5.2916662 21.166666 5.2916662" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3992" StrokeThickness="0.264583" Stroke="Cyan"> <Path.Data> <PathGeometry Figures="m 21.166666 15.483325 c 7.143751 0 14.966886 -5.291673 21.166667 -5.291666 6.614585 7e-6 15.08125 5.291666 21.166666 5.291666" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3994" StrokeThickness="0.264583" Stroke="Cyan"> <Path.Data> <PathGeometry Figures="m 21.166666 17.247214 c 7.143751 0 14.966886 -5.291673 21.166667 -5.291666 6.614585 7e-6 15.08125 5.291666 21.166666 5.291666" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3996" StrokeThickness="0.264583" Stroke="Cyan"> <Path.Data> <PathGeometry Figures="m 21.166666 19.011103 c 7.143751 0 14.966886 -5.291673 21.166667 -5.291666 6.614585 7e-6 15.08125 5.291666 21.166666 5.291666" FillRule="EvenOdd" /> </Path.Data> </Path> <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="use3998" StrokeThickness="0.264583" Stroke="Cyan"> <Path.Data> <PathGeometry Figures="m 21.166666 20.774992 c 7.143751 0 14.966886 -5.291673 21.166667 -5.291667 6.614585 8e-6 15.08125 5.291667 21.166666 5.291667" FillRule="EvenOdd" /> </Path.Data> </Path> </Canvas> </Canvas> </Canvas> </VisualBrush.Visual> </VisualBrush> <DataTemplate x:Key="TabCtnts"> <ListBox>t</ListBox> </DataTemplate> <DataTemplate x:Key="TabHdr"> <StackPanel Orientation="Horizontal" DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}"> <Label VerticalAlignment="Center" VerticalContentAlignment="Center" MaxWidth="397"> <Label.Content> <TextBlock TextTrimming="WordEllipsis" Text="{Binding Title}" ToolTip="{Binding Title}" /> </Label.Content> </Label> <Button Click="OnChildNeedsClosed" ToolTip="Close this script" Style="{DynamicResource TabBarCloseBtn}" Background="{x:Null}">✘</Button> </StackPanel> </DataTemplate > <DataTemplate x:Key="Tab"> <TabItem ContentTemplate="{DynamicResource TabCtnts}" HeaderTemplate="{DynamicResource TabHdr}" /> </DataTemplate> </Window.Resources> <DockPanel> <Border DockPanel.Dock="Top" BorderBrush="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" BorderThickness="0,0,0,1" Margin="0,0,0,3" Padding="0,3,0,0"> <StackPanel x:Name="toolBar" Orientation="Horizontal"> <Button x:Name="btnOpen" Content="Open" Click="OnOpenClicked" Style="{DynamicResource ToolbarBtn}" /> <Separator Style="{DynamicResource ToolBarSep}" /> <Button x:Name="btnFullScreen" Content="Full Screen" Style="{DynamicResource ToolbarBtn}" /> </StackPanel> </Border> <TabControl x:Name="sheetMain" ItemTemplate="{DynamicResource Tab}" /> </DockPanel> </Window>