2011-09-15 1 views
1

J'ai les éléments suivants Grid.Correspondance des tailles d'éléments empilés dans WPF

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

Cela ressemble à ceci.

Sample

Indication la première est horizontale tandis que l'autre est vertical.

Comment puis-je dire que le Border est de la même taille que le Grid? C'est ainsi que je peux faire correspondre l'ombre portée.

Répondre

1

Je vais essayer la suivante:

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

Vive

+0

Merci. Cela a bien fonctionné à part que je devais me lier à 'l'Image'. –

+0

Savez-vous pourquoi si j'ai le whitebackground sur la grille, il clipse le côté droit de l'ombre? –

+0

Probablement parce que la grille et la bordure ont la même largeur exacte. De toute façon, je ne suis pas sûr de vouloir dire l'effet. Pourriez-vous poster un instantané? –

1

Le code que vous avez posté fonctionne très bien pour moi, la taille de la bordure correspond à la taille de la grille interne, car ils sont tous deux étirés pour s'adapter à la taille de la grille externe. Si votre grille externe est une taille d'ensemble et que votre image interne est de taille variable, vous pouvez envisager de déplacer votre bordure dans la grille interne et de définir son alignement horizontal/vertical sur Centre afin qu'elle ne soit pas affectée. t Aréolées le contenu de il

<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

le flou est appliqué. Je ne veux pas le flou sur 'Image'. –

+0

@Daniel Ne pouvez-vous pas définir un 'Marge' pour compenser un peu la bordure de l'image? – Rachel

+0

@Daniel Nevermind, je vois ce que tu veux dire. Le code que vous avez posté fonctionne très bien pour moi, la taille de la bordure correspond à la taille de la grille interne, car ils sont tous deux étirés pour s'adapter à la taille de la grille externe. Si votre Grid externe est une taille d'ensemble, vous pouvez envisager d'imbriquer une autre Grille entre celle intérieure et extérieure qui est autorisé à la taille de son contenu pour enfants (Définir l'alignement horizontal/vertical au centre) – Rachel

Questions connexes