Ombre tout autour d'une FORM WPF

Version imprimable

04/11/2011, 16h45
Nixeus

Ombre tout autour d'une FORM WPF
Bonjour à tous,

Je voudrais une ombre tout autour de ma FORM ( et non juste en bas et à droite).

J'utilise actuellement ceci :
Code:

1 2 <shadows:SystemDropShadowChrome CornerRadius="10" Color="#50000000" > </shadows:SystemDropShadowChrome>
Mais l'ombre n'est qu'en bas et à droite. Je souhaiterai que cette ombre soit tout autour de ma FORM. Auriez vous une astuce ? Merci beaucoup :)
04/11/2011, 18h32
GuruuMeditation

Pas que je sache. SystemDropShadowChrome est optimisé, mais en contrepartie est assez rigide. Pour faire ce que tu veux, il y aurait moyen avec un rectangle un peut plus grand que ta form en dessous de celle-ci. Et appliquer un BlurEffect. Il y a peut-etre un meilleur moyen.

bonjour Nixeus
comme l'as dit GuruuMeditation,le SystemDropShadowChrome est optimisé(utilise le Microsoft.Windows.Themes)
Le DropShadowEffect simple-qui helas n'est pas optimise(il est bon juste pour un simple splash screen) peu te permettre de realiser l'ombrage sur les 4 cotes....
voici un winform avec le SystemDropShadowChrome avec 2 ombres comme tu l'as decrit:
code xaml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<Window x:Class="MainWindowWithAeroShadow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:aero="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    WindowStyle="None" 
    WindowStartupLocation="CenterScreen"
    Background="Transparent"
    AllowsTransparency="True"
    Title="MainWindow WithAeroShadow" 
    Height="300" Width="300">
    <!--exemple msdn 1 using a SystemDropShadowChrome:-->
 
    <Window.Resources>
        <Color x:Key="ShadowColor">#887D955B</Color>
        <LinearGradientBrush x:Key="SplashBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.0" Color="#FFC6E798"/>
                <GradientStop Offset="1.0" Color="#FFEBF7DB"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Window.Resources>
 
    <aero:SystemDropShadowChrome 
      Color="{StaticResource ShadowColor}" 
      CornerRadius="1"
      Margin="0,0,3,3">  
    <Grid 
        Background="{StaticResource SplashBackgroundBrush}" 
        Margin="0,0,3,3">
 
    </Grid>
    </aero:SystemDropShadowChrome>
</Window>

voici le meme rectangle avec le DropShadowEffect avec les 4 ombrages en donnant un fort blureffect comme l'as dit GuruuMeditation :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
Window x:Class="MainWindowWithDropShadow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    WindowStyle="None" 
    WindowStartupLocation="CenterScreen"
    Background="Transparent"
    AllowsTransparency="True"
    Title="MainWindowWithDropShadow"
    Height="300" Width="300">
    <!--exemple msdn 2 using a BitmapEffect DropShadowChrome:-->
    <Window.Resources>
        <Color x:Key="ShadowColor">#887D955B</Color>
        <LinearGradientBrush x:Key="SplashBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.0" Color="#FFC6E798"/>
                <GradientStop Offset="1.0" Color="#FFEBF7DB"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Window.Resources>
    <Window.Effect>
        <DropShadowEffect 
            ShadowDepth="3" 
            Color="{StaticResource ShadowColor}" 
            BlurRadius="25"
             />
    </Window.Effect>
    <Grid 
        Background="{StaticResource SplashBackgroundBrush}" 
        Margin="15">
 
    </Grid>
</Window>

a toi de voir ce qu tu veux...................
bon code..................

07/11/2011, 15h40
Nixeus
Bonjour à vous deux et merci pour vos réponses.

La première solution me convient bien sauf que ma form à des coins arrondis

Voila ce que j'utilise
Code:

1 2 <Border CornerRadius="10" Background="#FFEAEBDD" >
Sans cette ligne, l'ombre est très belle et c'est exactement ce que je cherche, mais avec la ligne ci dessus ( celle pour avoir les coins arrondis), je n'ai que l'ombre sur les coins, enfin c'est assez étrange à expliquer.

bonjour Nixeus
Mais comme tu ne peux montre qu'une partie de ton code,je suis amene à penser que tu as neglige les marges de positionnement des elements (le dropshadow et le border)...sans oublier que les marges sans additives(la marge "reelle" de border dans cet exemple=sa marge+celle de dropshadow qui l'englobe soit 6).....
Voici le role des marges:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<Window x:Class="MainWindowWithAeroShadow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:aero="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    WindowStyle="None" 
    WindowStartupLocation="CenterScreen"
    Background="Transparent"
    AllowsTransparency="True"
    Title="MainWindow WithAeroShadow" 
    Height="300" Width="300">
 
    <!--exemple msdn 1 using a SystemDropShadowChrome:-->
 
    <Window.Resources>
        <Color x:Key="ShadowColor">#887D955B</Color>
        <LinearGradientBrush x:Key="SplashBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.0" Color="#FFC6E798"/>
                <GradientStop Offset="1.0" Color="#FFEBF7DB"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Window.Resources>
 
        <aero:SystemDropShadowChrome 
          Color="{StaticResource ShadowColor}" 
          CornerRadius="10"
          Margin="0,0,3,3">
 
        <Border 
            CornerRadius="10"
            Background="#FFEAEBDD"
            Margin="0,0,3,3">
        </Border>
    </aero:SystemDropShadowChrome>
 
</Window>

bon code...............

09/11/2011, 15h22
Nixeus

Bonjour et merci de ta réponse,

IL me faudrait donc augmenter les valeurs des marges ?

Voici le code XAML de ma fenêtre.
Ou ajouter les marges pour que l'effet d'ombre soit bien visible?

Merci infiniment :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
Window x:Class="SW_DEBUGGER.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title=""
        Height="737" 
        Width="916"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        Loaded="Window_Loaded"
        Background="Transparent"
        AllowsTransparency="True"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        ResizeMode="NoResize" 
        Topmost="False"
        HorizontalContentAlignment="Center"
        VerticalContentAlignment="Center"
        IsEnabled="True"
        ShowInTaskbar="True"
        Visibility="Visible">
 
    <Window.Resources>
        <Color x:Key="ShadowColor">#887D955B</Color>
        <LinearGradientBrush x:Key="SplashBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Offset="0.0" Color="#FFEAEBDD"/>
            <GradientStop Offset="1.0" Color="#FFEAEBDD"/>
        </LinearGradientBrush>
    </Window.Resources>
    <Window.Effect>
        <DropShadowEffect ShadowDepth="0" Color="{StaticResource ShadowColor}" BlurRadius="20"/>
    </Window.Effect>
 
    <Border CornerRadius="10" Background="#FFEAEBDD">
        <Viewbox>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="916" Height="737" Background="{StaticResource SplashBackgroundBrush}" 
        Margin="15" >
 
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,-6,0" Width="76" Height="31" VerticalAlignment="Top">
                        <Button x:Name="btReduce" Click="btReduce_Click" Margin="0,0,5,0" Width="36" Height="29">
                            <Button.Template>
                                <ControlTemplate>
                                    <Image Name="reduce" Source="reduce.png"  Width="16" Height="16" />
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="reduce" Property="Source" Value="reduce_onmouseover.png"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                        <Button x:Name="btClose" Click="btClose_Click" Height="Auto" Width="Auto">
                            <Button.Template>
                                <ControlTemplate>
                                    <Image Name="close" Source="close.png" Width="16" Height="16" />
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="close" Property="Source" Value="close_onmouseover.png"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                    </StackPanel>
                    <TextBox Height="21" HorizontalAlignment="Left" Margin="36,233,0,0" Name="TextBoxUrl" VerticalAlignment="Top" Width="346" Background="White" />
                    <Label Content="URL du service web" Height="32" HorizontalAlignment="Left" Margin="36,196,0,0" Name="label1" VerticalAlignment="Top" Width="125" FontStyle="Normal" FontWeight="ExtraBold" Foreground="#FF333333" />
                    <Button Content="Lancer la demande" Height="28" HorizontalAlignment="Left" Margin="703,346,0,0" Name="button1" VerticalAlignment="Top" Width="120" Click="button1_Click" />
                    <Label Content="Action à invoquer" Height="32" HorizontalAlignment="Left" Margin="453,197,0,0" Name="label2" VerticalAlignment="Top" Width="125" FontWeight="ExtraBold" Foreground="#FF333333" />
                    <TextBox Height="21" HorizontalAlignment="Left" Margin="453,233,0,0" Name="TextBoxAction" VerticalAlignment="Top" Width="319" Background="White" />
                    <Label Content="Paramètre complémentaires" Height="32" HorizontalAlignment="Left" Margin="36,279,0,0" Name="label3" VerticalAlignment="Top" Width="177" FontWeight="ExtraBold" Foreground="#FF333333" />
                    <TextBox Height="87" HorizontalAlignment="Left" Margin="36,317,0,0" Name="textBoxParam" VerticalAlignment="Top" Width="346" AcceptsReturn="True" AcceptsTab="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" HorizontalContentAlignment="Left" Background="White" />
                    <TabControl Height="281" HorizontalAlignment="Left" Margin="19,439,0,0" Name="tabControl1" VerticalAlignment="Top" Width="876">
                        <TabItem Header="Flux reçu brut" Name="tabItem1" Background="#FFF3F3E9">
                            <TextBox Height="199" Name="textBox1" Width="841" TextWrapping="Wrap" />
                        </TabItem>
                        <TabItem Header="Flux reçu décodé base64" Name="tabItem2" Background="#FFF3F3E9">
                            <TextBox Height="199" Name="textBox2" Width="841" TextWrapping="Wrap" />
                        </TabItem>
                        <TabItem Header="Flux reçu décodé base64 et xml" Name="tabItem3" Background="#FFF3F3E9">
                            <TextBox Height="199" Name="textBox3" Width="841" TextWrapping="Wrap" />
                        </TabItem>
                        <TabItem Header="Flux reçu décodé base64 et xml et décompressé" Name="tabItem4" Background="#FFF3F3E9">
                            <TextBox Height="199" Name="textBox4" Width="841" TextWrapping="Wrap" />
                        </TabItem>
                    </TabControl>
                    <CheckBox Content="Coder en base64" Height="21" HorizontalAlignment="Left" Margin="398,322,0,0" Name="checkBox1" VerticalAlignment="Top" Width="125" />
                    <CheckBox Content="Transcrire " HorizontalAlignment="Left" Margin="398,352,0,363" Name="checkBox2" Width="147" />
                    <CheckBox Content="Compresser avec" Height="22" HorizontalAlignment="Left" Margin="398,0,0,332" Name="checkBox3" VerticalAlignment="Bottom" Width="147" Click="checkBox3_Click" />
                    <ComboBox Height="20" HorizontalAlignment="Left" Margin="515,382,0,0" Name="comboBox1" VerticalAlignment="Top" Width="62" />
                </Grid>
 
            </Viewbox>
 </Border>
</Window>

Cordialement,

Nixeus

C'est plutôt sur le border qu'il faudrait faire l'ombre, non?

Code:

1
2
3
4
5
6
7
 
   <Border CornerRadius="10" Background="#FFEAEBDD" Margin="20">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="0"
                          Color="{StaticResource ShadowColor}"
                          BlurRadius="20" />
    </Border.Effect>

10/11/2011, 10h13
Nixeus

Bonjour et merci de ta réponse, cela fonctionne.

En, revanche, cette méthode fonctionne avec DropShadowEffect qui est donc non optimisé.

Comment le faire dans mon cas avec SystemDropShadowChrome ? J'ai souhaietrai tenté le coup afin d'optimiser mon programme.

Merci beaucoup :)

ombre accentue shadowaero

bonjour nexeus
pourtant c'est bien clair nexeus .
Les marges dans la balise <aero:SystemDropShadowChrome (qui manque dans ton code au passage) et les marges dans la balise <Border
code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
Window x:Class="SW_DEBUGGER.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title=""
        Height="737" 
        Width="916"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        Loaded="Window_Loaded"
        Background="Transparent"
        AllowsTransparency="True"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        ResizeMode="NoResize" 
        Topmost="False"
        HorizontalContentAlignment="Center"
        VerticalContentAlignment="Center"
        IsEnabled="True"
        ShowInTaskbar="True"
        Visibility="Visible">
    <Window.Resources>
    <Color x:Key="ShadowColor">#887D955B</Color>
    <LinearGradientBrush x:Key="SplashBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Offset="0.0" Color="#FFEAEBDD"/>
        <GradientStop Offset="1.0" Color="#FFEAEBDD"/>
    </LinearGradientBrush>
</Window.Resources>
<Window.Effect>
    <DropShadowEffect ShadowDepth="0" Color="{StaticResource ShadowColor}" BlurRadius="20"/>
</Window.Effect>
<!--rajoute cette balise et mets-y les marges-->
<!--tu remplaces ShadowColor par ton background #FFEAEBDD si tu veux"-->
<aero:SystemDropShadowChrome 
        Color="{StaticResource ShadowColor}" 
        CornerRadius="10"
        Margin="10,10,10,10">
        <Border 
            CornerRadius="10" 
            Background="#FFEAEBDD"
            Margin="15,15,5,5">
            <Viewbox>
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="916" Height="737" Background="{StaticResource SplashBackgroundBrush}" 
                Margin="15" >
 
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,-6,0" Width="76" Height="31" VerticalAlignment="Top">
                        <Button x:Name="btReduce" Click="btReduce_Click" Margin="0,0,5,0" Width="36" Height="29">
                            <Button.Template>
                                <ControlTemplate>
                                    <Image Name="reduce" Source="reduce.png"  Width="16" Height="16" />
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="reduce" Property="Source" Value="reduce_onmouseover.png"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                        <Button x:Name="btClose" Click="btClose_Click" Height="Auto" Width="Auto">
                            <Button.Template>
                                <ControlTemplate>
                                    <Image Name="close" Source="close.png" Width="16" Height="16" />
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="close" Property="Source" Value="close_onmouseover.png"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                    </StackPanel>
                    <TextBox Height="21" HorizontalAlignment="Left" Margin="36,233,0,0" Name="TextBoxUrl" VerticalAlignment="Top" Width="346" Background="White" />
                    <Label Content="URL du service web" Height="32" HorizontalAlignment="Left" Margin="36,196,0,0" Name="label1" VerticalAlignment="Top" Width="125" FontStyle="Normal" FontWeight="ExtraBold" Foreground="#FF333333" />
                    <Button Content="Lancer la demande" Height="28" HorizontalAlignment="Left" Margin="703,346,0,0" Name="button1" VerticalAlignment="Top" Width="120" Click="button1_Click" />
                    <Label Content="Action à invoquer" Height="32" HorizontalAlignment="Left" Margin="453,197,0,0" Name="label2" VerticalAlignment="Top" Width="125" FontWeight="ExtraBold" Foreground="#FF333333" />
                    <TextBox Height="21" HorizontalAlignment="Left" Margin="453,233,0,0" Name="TextBoxAction" VerticalAlignment="Top" Width="319" Background="White" />
                    <Label Content="Paramètre complémentaires" Height="32" HorizontalAlignment="Left" Margin="36,279,0,0" Name="label3" VerticalAlignment="Top" Width="177" FontWeight="ExtraBold" Foreground="#FF333333" />
                    <TextBox Height="87" HorizontalAlignment="Left" Margin="36,317,0,0" Name="textBoxParam" VerticalAlignment="Top" Width="346" AcceptsReturn="True" AcceptsTab="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" HorizontalContentAlignment="Left" Background="White" />
                    <TabControl Height="281" HorizontalAlignment="Left" Margin="19,439,0,0" Name="tabControl1" VerticalAlignment="Top" Width="876">
                        <TabItem Header="Flux reçu brut" Name="tabItem1" Background="#FFF3F3E9">
                            <TextBox Height="199" Name="textBox1" Width="841" TextWrapping="Wrap" />
                        </TabItem>
                        <TabItem Header="Flux reçu décodé base64" Name="tabItem2" Background="#FFF3F3E9">
                            <TextBox Height="199" Name="textBox2" Width="841" TextWrapping="Wrap" />
                        </TabItem>
                        <TabItem Header="Flux reçu décodé base64 et xml" Name="tabItem3" Background="#FFF3F3E9">
                            <TextBox Height="199" Name="textBox3" Width="841" TextWrapping="Wrap" />
                        </TabItem>
                        <TabItem Header="Flux reçu décodé base64 et xml et décompressé" Name="tabItem4" Background="#FFF3F3E9">
                            <TextBox Height="199" Name="textBox4" Width="841" TextWrapping="Wrap" />
                        </TabItem>
                    </TabControl>
                    <CheckBox Content="Coder en base64" Height="21" HorizontalAlignment="Left" Margin="398,322,0,0" Name="checkBox1" VerticalAlignment="Top" Width="125" />
                    <CheckBox Content="Transcrire " HorizontalAlignment="Left" Margin="398,352,0,363" Name="checkBox2" Width="147" />
                    <CheckBox Content="Compresser avec" Height="22" HorizontalAlignment="Left" Margin="398,0,0,332" Name="checkBox3" VerticalAlignment="Bottom" Width="147" Click="checkBox3_Click" />
                    <ComboBox Height="20" HorizontalAlignment="Left" Margin="515,382,0,0" Name="comboBox1" VerticalAlignment="Top" Width="62" />
                </Grid>
 
            </Viewbox>
        </Border>
    </aero:SystemDropShadowChrome>
</Window>

bon code...........