Is it possible to have a transparent "hole" in a layer of WPF?
-
I'm looking for a simple way for a part of a window to become transparent, like a hole, that "cuts through" what it is directly on top of and shows what is underneath. Or, more concretely, I want to design a little close button that is a circle with an X, but I want the X to actually be a hole in the circle that you can "see through" to whatever the button is sitting on. Before you answer, here's my guess: Create a circle, then create a region marking the "X", and subtract that region from the circle, treating the final shape as the button. The question is how easy is this (can it be done in XAML?), and are there any pitfalls to watch out for? Cheers Logan
“Time and space can be a bitch.” –Gushie, Quantum Leap {o,o}.oO( Looking for a great RSS reader? Try FeedBeast! ) |)””’) Built with home-grown CodeProject components! -”-”-
-
I'm looking for a simple way for a part of a window to become transparent, like a hole, that "cuts through" what it is directly on top of and shows what is underneath. Or, more concretely, I want to design a little close button that is a circle with an X, but I want the X to actually be a hole in the circle that you can "see through" to whatever the button is sitting on. Before you answer, here's my guess: Create a circle, then create a region marking the "X", and subtract that region from the circle, treating the final shape as the button. The question is how easy is this (can it be done in XAML?), and are there any pitfalls to watch out for? Cheers Logan
“Time and space can be a bitch.” –Gushie, Quantum Leap {o,o}.oO( Looking for a great RSS reader? Try FeedBeast! ) |)””’) Built with home-grown CodeProject components! -”-”-
Is this what you're after?
<Window
Height="200"
Width="200"
Background="#00ffffff"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<SolidColorBrush
x:Key="Brush1"
Color="#000033" />
</Window.Resources><Grid x:Name="Layer\_1" Height="40" Width="40"> <Path Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="40" Width="40" Stretch="Fill" Opacity="1" Data="M 8.5,14 C8.5,14 12.75,8.5
12.75,8.5 14.498807907104492,
8.148337364196777 19.34754753112793,
14.70925235748291 20.5,
16 22.119489669799805,
17.813827514648438
27.8398494720459,
8.910149574279785 29.75,
7 30.831758499145508,
9.835678100585938 32.206844329833984,
13.383567810058594 32,16.5 32,
16.5 28.25,22.5 28.25,
22.5 33.222450256347656,
27.986970901489258 40.2801399230957,
26.194717407226562 27.75,
34 27.75,34 22.25,
27.25 22.25,27.25 18.401948928833008,
28.660367965698242 14.9323091506958,
29.884185791015625 11.5,32.25 5.261133193969727,
27.62375831604004 9.23710823059082,
22.89365005493164 14.75,
19.5 14.75,
19.5 8.5,
15.75 8.5,
15.75 8.5,
15.75 8.5,
14 8.5,
14 zM 0,
20 C0,
31.04583740234375 8.95416259765625,
40 20,
40 31.04583740234375,
40 40,
31.04583740234375 40,
20 40,
8.95416259765625 31.04583740234375,
0 20,
0 8.95416259765625,
0 0,8.95416259765625 0,
20 z"
Fill="{StaticResource Brush1}" />
</Grid>
</Window>I knocked a rough version together in Fireworks, and then used the free Infragistics Fireworks to XAML Converter to output it.
Last modified: 33mins after originally posted --
Deja View - the feeling that you've seen this post before.
-
Is this what you're after?
<Window
Height="200"
Width="200"
Background="#00ffffff"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<SolidColorBrush
x:Key="Brush1"
Color="#000033" />
</Window.Resources><Grid x:Name="Layer\_1" Height="40" Width="40"> <Path Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="40" Width="40" Stretch="Fill" Opacity="1" Data="M 8.5,14 C8.5,14 12.75,8.5
12.75,8.5 14.498807907104492,
8.148337364196777 19.34754753112793,
14.70925235748291 20.5,
16 22.119489669799805,
17.813827514648438
27.8398494720459,
8.910149574279785 29.75,
7 30.831758499145508,
9.835678100585938 32.206844329833984,
13.383567810058594 32,16.5 32,
16.5 28.25,22.5 28.25,
22.5 33.222450256347656,
27.986970901489258 40.2801399230957,
26.194717407226562 27.75,
34 27.75,34 22.25,
27.25 22.25,27.25 18.401948928833008,
28.660367965698242 14.9323091506958,
29.884185791015625 11.5,32.25 5.261133193969727,
27.62375831604004 9.23710823059082,
22.89365005493164 14.75,
19.5 14.75,
19.5 8.5,
15.75 8.5,
15.75 8.5,
15.75 8.5,
14 8.5,
14 zM 0,
20 C0,
31.04583740234375 8.95416259765625,
40 20,
40 31.04583740234375,
40 40,
31.04583740234375 40,
20 40,
8.95416259765625 31.04583740234375,
0 20,
0 8.95416259765625,
0 0,8.95416259765625 0,
20 z"
Fill="{StaticResource Brush1}" />
</Grid>
</Window>I knocked a rough version together in Fireworks, and then used the free Infragistics Fireworks to XAML Converter to output it.
Last modified: 33mins after originally posted --
Deja View - the feeling that you've seen this post before.
:wtf: ...yeah... that's the general idea. Lol thanks. Alas I don't have Fireworks, and I don't think I know enough to tweak those seemingly random values by hand. It looks good tho, so I might just use that for now, if you don't have any objections. ;) Logan
“Time and space can be a bitch.” –Gushie, Quantum Leap {o,o}.oO( Looking for a great RSS reader? Try FeedBeast! ) |)””’) Built with home-grown CodeProject components! -”-”-
-
:wtf: ...yeah... that's the general idea. Lol thanks. Alas I don't have Fireworks, and I don't think I know enough to tweak those seemingly random values by hand. It looks good tho, so I might just use that for now, if you don't have any objections. ;) Logan
“Time and space can be a bitch.” –Gushie, Quantum Leap {o,o}.oO( Looking for a great RSS reader? Try FeedBeast! ) |)””’) Built with home-grown CodeProject components! -”-”-
No objections here.
chaiguy1337 wrote:
seemingly random values by hand.
You mean you can't read them? And I thought they were soooooo obvious.
Deja View - the feeling that you've seen this post before.
-
No objections here.
chaiguy1337 wrote:
seemingly random values by hand.
You mean you can't read them? And I thought they were soooooo obvious.
Deja View - the feeling that you've seen this post before.
:laugh:
“Time and space can be a bitch.” –Gushie, Quantum Leap {o,o}.oO( Looking for a great RSS reader? Try FeedBeast! ) |)””’) Built with home-grown CodeProject components! -”-”-