locked
How to fill retangle with pattern? RRS feed

  • Question

  • Hello, I'm new in Blend 4, i'm truying to fill a retangle with pattern but I can't do it, I tried for hours and searched in google and youtube, but nothing =(. Anybody knows how to fill a retangle with a pattern?

    Thank you

    Friday, September 28, 2012 1:38 PM

All replies

  • Hello Graficoiulian and welcome to Blend.

    There used to be a video tutorial on using TileBrush in the videos section of this site.

    Here is a sample of using an ImageBrush and using a VisualBrush...

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="WpfApplication41.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="640">
    	<Window.Resources>
    		<LinearGradientBrush x:Key="Brush1" EndPoint="0.856,0.851" StartPoint="0.144,0.149">
    			<GradientStop Color="Black" Offset="0.495"/>
    			<GradientStop Color="Red" Offset="0.5"/>
    		</LinearGradientBrush>
    		<LinearGradientBrush x:Key="Brush2" EndPoint="0.5,1" StartPoint="0.5,0">
    			<GradientStop Color="Black" Offset="0"/>
    			<GradientStop Color="#FF00FF27" Offset="1"/>
    		</LinearGradientBrush>
    		<RadialGradientBrush x:Key="Brush3">
    			<GradientStop Color="White" Offset="0"/>
    			<GradientStop Color="#FF0010FF" Offset="1"/>
    		</RadialGradientBrush>
    	</Window.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<WrapPanel Margin="0" Orientation="Horizontal" Width="450" Height="450" HorizontalAlignment="Center" VerticalAlignment="Center">
    			<WrapPanel.Background>
    				<ImageBrush/>
    			</WrapPanel.Background>
    			<Grid RenderTransformOrigin="0.5,0.5" Width="200" Height="200" VerticalAlignment="Top" Margin="10">
    				<Grid.Background>
    					<ImageBrush ImageSource="myImage.png" TileMode="FlipXY">
    						<ImageBrush.RelativeTransform>
    							<TransformGroup>
    								<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleX="0.2" ScaleY="0.2"/>
    								<SkewTransform CenterY="0.5" CenterX="0.5"/>
    								<RotateTransform CenterY="0.5" CenterX="0.5" Angle="-45"/>
    								<TranslateTransform/>
    							</TransformGroup>
    						</ImageBrush.RelativeTransform>					
    					</ImageBrush>
    				</Grid.Background>
    			</Grid>
    		
    			<Grid RenderTransformOrigin="0.5,0.5" Width="200" Height="200" Margin="10">
    				<Grid.Background>
    					<VisualBrush TileMode="FlipXY">
    						<VisualBrush.RelativeTransform>
    							<TransformGroup>
    								<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="0.1" ScaleX="0.1"/>
    								<SkewTransform AngleY="0" AngleX="0" CenterY="0.5" CenterX="0.5"/>
    								<RotateTransform Angle="45" CenterY="0.5" CenterX="0.5"/>
    								<TranslateTransform/>
    							</TransformGroup>
    						</VisualBrush.RelativeTransform>
    						<VisualBrush.Visual>
    							<Rectangle HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100" Fill="{DynamicResource Brush1}"/>
    						</VisualBrush.Visual>
    					</VisualBrush>
    				</Grid.Background>
    			</Grid>
    			<Grid RenderTransformOrigin="0.5,0.5" Width="200" Height="200" Margin="10">
    				<Grid.Background>
    					<VisualBrush TileMode="Tile">
    						<VisualBrush.RelativeTransform>
    							<TransformGroup>
    								<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="0.5" ScaleX="0.5"/>
    								<SkewTransform AngleY="0" AngleX="0" CenterY="0.5" CenterX="0.5"/>
    								<RotateTransform CenterY="0.5" CenterX="0.5"/>
    								<TranslateTransform/>
    							</TransformGroup>
    						</VisualBrush.RelativeTransform>
    						<VisualBrush.Visual>
    							<Rectangle HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100" Fill="{DynamicResource Brush2}"/>
    						</VisualBrush.Visual>
    					</VisualBrush>
    				</Grid.Background>
    			</Grid>
    			<Grid RenderTransformOrigin="0.5,0.5" Width="200" Height="200" Margin="10">
    				<Grid.Background>
    					<VisualBrush TileMode="FlipXY">
    						<VisualBrush.RelativeTransform>
    							<TransformGroup>
    								<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="0.3" ScaleX="0.3"/>
    								<SkewTransform AngleY="20" AngleX="20" CenterY="0.5" CenterX="0.5"/>
    								<RotateTransform CenterY="0.5" CenterX="0.5"/>
    								<TranslateTransform/>
    							</TransformGroup>
    						</VisualBrush.RelativeTransform>
    						<VisualBrush.Visual>
    							<Rectangle HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100" Fill="{DynamicResource Brush3}"/>
    						</VisualBrush.Visual>
    					</VisualBrush>
    				</Grid.Background>
    			</Grid>
    		</WrapPanel>
    	</Grid>
    </Window>

    I'll hunt for the video and post a link in a sec.

    ~Christine


    My Gallery


    Friday, September 28, 2012 4:03 PM
  • Hello, I tried to find the video but I didn't found it.

    Can you link me the video, please? Tnx =)

    Tuesday, October 16, 2012 12:12 PM
  • Forgive me I should have responded long ago. 

    I was not able to find the video either.  But I remembered, probably incorrectly, having seen one a couple of years ago in the video/learning section.

    Here's an example of using a TileBrush… http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.aspx  (Towards the bottom of the page.)

    And another with a few more examples... http://msdn.microsoft.com/en-us/library/aa970682.aspx

    ~Christine


    My Gallery

    Tuesday, October 16, 2012 4:03 PM