在 WPF 中匹配堆叠项目的大小

发布于 2024-12-04 21:36:02 字数 910 浏览 0 评论 0原文

我有以下网格。

 <Grid DockPanel.Dock="Bottom">
     <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="4" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
         <Border.RenderTransform>
             <TranslateTransform X="2" Y="2" />
         </Border.RenderTransform>
         <Border.BitmapEffect>
             <BlurBitmapEffect Radius="4" />
         </Border.BitmapEffect>
     </Border>
     <Grid Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
         <Image Source="{Binding Image}"></Image>
     </Grid>
 </Grid>

它渲染成这样。

Sample

请注意，第一个是水平的，而另一个是垂直的。

如何让 Border 与内部 Grid 大小相同？这样我就可以匹配投影。

原文

I have the following Grid.

 <Grid DockPanel.Dock="Bottom">
     <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="4" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
         <Border.RenderTransform>
             <TranslateTransform X="2" Y="2" />
         </Border.RenderTransform>
         <Border.BitmapEffect>
             <BlurBitmapEffect Radius="4" />
         </Border.BitmapEffect>
     </Border>
     <Grid Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
         <Image Source="{Binding Image}"></Image>
     </Grid>
 </Grid>

It renders like this.

Sample

Notice the first one is horizontal while the other is vertical.

How do I tell the Border to be the same size as the inner Grid? This is so that I can match the drop shadow.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相思碎 2024-12-11 21:36:02

我会尝试以下操作：

<Grid DockPanel.Dock="Bottom">
     <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="4" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"
Width="{Binding ElementName=G, Path=ActualWidth}"
Height="{Binding ElementName=G, Path=ActualHeight}"
     >
         <Border.RenderTransform>
             <TranslateTransform X="2" Y="2" />
         </Border.RenderTransform>
         <Border.BitmapEffect>
             <BlurBitmapEffect Radius="4" />
         </Border.BitmapEffect>
     </Border>
     <Grid x:Name="G" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
         <Image Source="{Binding Image}"></Image>
     </Grid>
 </Grid>

干杯

I'd try the follows:

<Grid DockPanel.Dock="Bottom">
     <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="4" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"
Width="{Binding ElementName=G, Path=ActualWidth}"
Height="{Binding ElementName=G, Path=ActualHeight}"
     >
         <Border.RenderTransform>
             <TranslateTransform X="2" Y="2" />
         </Border.RenderTransform>
         <Border.BitmapEffect>
             <BlurBitmapEffect Radius="4" />
         </Border.BitmapEffect>
     </Border>
     <Grid x:Name="G" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
         <Image Source="{Binding Image}"></Image>
     </Grid>
 </Grid>

Cheers

回复收藏 0 原文

萌吟 2024-12-11 21:36:02

您发布的代码对我来说效果很好，边框大小与内部网格的大小相匹配，因为它们都被拉伸以适合外部网格的大小。

如果您的外部网格无论如何都是固定尺寸，并且您的内部图像是可变尺寸，您可能需要考虑将边框移动到内部网格并将其水平/垂直对齐设置为居中，这样它就不会拉伸以填充它的内容

<Grid DockPanel.Dock="Bottom">
     <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">

          <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="4" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
              <Border.RenderTransform>
                  <TranslateTransform X="2" Y="2" />
              </Border.RenderTransform>
              <Border.BitmapEffect>
                  <BlurBitmapEffect Radius="4" />
              </Border.BitmapEffect>
          </Border>

         <Image Source="{Binding Image}" Height="150" Width="150"></Image>
     </Grid>
 </Grid>

The code you posted works fine for me, the border size matches the inner Grid's size, because they are both stretched to fit the Outer Grid's Size.

If your outer Grid is a set size no matter what, and your inner Image is a variable size, you might want to consider moving your Border into the Inner Grid and setting it's Horizontal/Vertical alignment to Center so it doesn't stretch to fill it's contents

<Grid DockPanel.Dock="Bottom">
     <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">

          <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="4" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
              <Border.RenderTransform>
                  <TranslateTransform X="2" Y="2" />
              </Border.RenderTransform>
              <Border.BitmapEffect>
                  <BlurBitmapEffect Radius="4" />
              </Border.BitmapEffect>
          </Border>

         <Image Source="{Binding Image}" Height="150" Width="150"></Image>
     </Grid>
 </Grid>

回复收藏 0 原文

~没有更多了~