CODEWITHSUNDEEP
wpfxaml
Andreas
Andreas

Reputation: 478

Multiple images with VisualBrush as background

So, i'd like to combine three images for a listbox-background, not on top of each other but horizontally next to each other. I have a left-image, a center-image and a right-image. The center one is 1x150px to i need have that one repeat horizontally. I tried the following:

<Window.Resources>
  <ImageBrush x:Key="CenterImage" ImageSource="{StaticResource Center}" TileMode="Tile" ViewportUnits="Absolute" Viewport="0 0 1 150"/>
  <ImageBrush x:Key="Left" ImageSource="{StaticResource Left}" TileMode="None" />
  <ImageBrush x:Key="Right" ImageSource="{StaticResource Right}" TileMode="None" />
  <VisualBrush x:Key="BackgroundBrush">
    <VisualBrush.Visual>
      <Grid Height="150">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="78"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="78"/>
        </Grid.ColumnDefinitions>
        <Grid Background="{StaticResource Left}"/>
        <Grid Grid.Column="1" Background="{StaticResource Center}" HorizontalAlignment="Stretch"/>
        <Grid Grid.Column="2" Background="{StaticResource Right}"/>
      </Grid>
    </VisualBrush.Visual>
  </VisualBrush>  
</Window.Resources>
<Grid Background="{StaticResource BackgroundBrush}"/>

Since the grid in the VisualBrush has three columns, two with 78px width, i would have guessed that it would look that way. Instead the 2nd column doesn't get displayed at all and the first and third column stretch. Why does that happen and is there a way to fix this behavior?

Red is left image, green is right image. Center image is grey.

enter image description here

If you just take the grid and not use it as a background, everything looks as it should, sadly i cannot do that because i need it to be the background of a listbox.

Upvotes: 0

Views: 1893

Answers (1)

SamTh3D3v
SamTh3D3v

Reputation: 9944

Looks like the VisualBrush's Grid wasn't calculated, Bind it to the ActualWidth Of its parent 

<Window.Resources>
 <ImageBrush x:Key="CenterImage" ImageSource="{StaticResource Center}"  TileMode="Tile" ViewportUnits="Absolute" Viewport="0 0 1 150"/>
  <ImageBrush x:Key="Left" ImageSource="{StaticResource Left}" TileMode="None" />
  <ImageBrush x:Key="Right" ImageSource="{StaticResource Right}" TileMode="None" />
 <VisualBrush x:Key="BackgroundBrush">
  <VisualBrush.Visual>
   <Grid Height="150" Width="{Binding Path=ActualWidth, ElementName=GridWidth}">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="78"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="78"/>
    </Grid.ColumnDefinitions>
    <Grid Background="{StaticResource Left}"/>
    <Grid Grid.Column="1" Background="{StaticResource Center}" HorizontalAlignment="Stretch"/>
    <Grid Grid.Column="2" Background="{StaticResource Right}"/>
  </Grid>
 </VisualBrush.Visual>
</VisualBrush>  
</Window.Resources>
<Grid Background="{StaticResource BackgroundBrush}" x:Name="GridWidth"/>

Upvotes: 2

Related Questions