以 VisualBrush 作为背景的多个图像答案

【问题标题】：Multiple images with VisualBrush as background以 VisualBrush 作为背景的多个图像
【发布时间】：2015-08-31 12:44:44
【问题描述】：

所以，我想将三个图像组合为一个列表框背景，不是彼此重叠，而是水平相邻。我有一个左图像，一个中心图像和一个右图像。中心的一个是 1x150 像素，我需要水平重复那个。我尝试了以下方法：

<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}"/>

由于 VisualBrush 中的网格有三列，其中两列的宽度为 78 像素，我猜它看起来会是这样。相反，第二列根本不会显示，第一列和第三列会拉伸。为什么会发生这种情况？有没有办法解决这个问题？

红色是左图，绿色是右图。中心图像为灰色。

如果你只是拿网格而不用它作为背景，一切看起来都应该如此，遗憾的是我不能这样做，因为我需要它作为列表框的背景。

【问题讨论】：

画笔没有尺寸，即没有宽度和高度可以调整网格的大小。而不是使用 VisualBrush，您应该将 ListBox 放在外部 Grid 中的 3 列图像 Grid 的顶部。

标签： wpf xaml

【解决方案1】：

看起来VisualBrush 的Grid 没有计算出来，将其绑定到其父级的ActualWidth

<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"/>

【讨论】：