Is there a way to make the shadow of the first control in a StackPanel appear on top of the second control?
I'm having trouble with this, look at the picture!
alt text http://img2.imageshack.us/img2/7073/issuef.png
Code sample:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<Grid>
<StackPanel>
<Border Height="100" Width="100" Background="Red">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="270" ShadowDepth="3" Opacity="1" Softness="2" />
</Border.BitmapEffect>
</Border>
<Border Height="100" Width="100" Background="blue">
</Border>
</StackPanel>
</Grid>
</Page>
You can do use Panel.ZIndex="0" in each of the Borders to set the z order of the items directly from the XAML.
<StackPanel>
<Border Height="100" Width="100" Background="Red" Panel.ZIndex="1">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="270" ShadowDepth="3" Opacity="1" Softness="2" />
</Border.BitmapEffect>
</Border>
<Border Height="100" Width="100" Background="blue" Panel.ZIndex="0">
</Border>
</StackPanel>
Or you can use StackPanel.SetZIndex(object, value) if you wanted to do it from code.
Related
In WPF, i wish to create rounded corner for my movie, but the movie actually will overlap the border and i get a normal rectangle box that load my movie. Any idea how to solve this issue?
<Border BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="20,20,20,20">
<Grid>
<MediaElement x:Name="movieLoader" HorizontalAlignment="Left" Height="128" VerticalAlignment="Top" Width="236" Source="../video/empty.mp4"/>
</Grid>
</Border>
Try this:
<Border x:Name="border" BorderThickness="1" BorderBrush="#FF000000" CornerRadius="20" Padding="1"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Border Name="mask" Background="White" CornerRadius="{Binding ElementName=border, Path=CornerRadius}"/>
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</Grid.OpacityMask>
<MediaElement x:Name="movieLoader" HorizontalAlignment="Left" Height="128"
VerticalAlignment="Top" Width="236" Source="../video/empty.mp4"/>
</Grid>
</Grid>
</Border>
Set ClipToBounds to True.
<Border ClipToBounds="True" BorderBrush="#FF000000" BorderThickness="1"
CornerRadius="20">
<Grid>
<MediaElement x:Name="movieLoader" HorizontalAlignment="Left"
Height="128" VerticalAlignment="Top" Width="236"
Source="../video/empty.mp4"/>
</Grid>
</Border>
I'm trying to implement the example outlined here:
http://www.codeproject.com/Articles/30994/Introduction-to-WPF-Templates
The author states "The ContentPresenter control can be used to display the content of a WPF control."
with the following code:
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"
Content="{TemplateBinding Button.Content}" />
I've added it to my window as follows:
<Window x:Class="HKC.Desktop.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="487" Width="765.924" Loaded="Window_Loaded">
<Grid x:Name="mainGrid" Background="#FF252525">
<Button Content="Push Me" Template="{StaticResource buttonTemplate}" Name="button1" Height="100" Width="100"></Button>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Button.Content}" />
</Grid>
</Window>
But I'm getting the following error:
Cannot set a TemplateBinding if not in a template.
How can I resolve this?
You need to put the ContentPresent in the ControlTemplate, like that
<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="el1" Fill="Orange" Width="100" Height="100">
</Ellipse>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"
Content="{TemplateBinding Button.Content}" />
</Grid>
</ControlTemplate>
The problem is that you have no template. Your XAML should look somehow like this:
<Window x:Class="HKC.Desktop.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="487" Width="765.924" Loaded="Window_Loaded">
<Window.Resources>
<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
<Ellipse Name="el1" Fill="Orange" Width="100" Height="100">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Button.Content}" />
</ControlTemplate>
</Window.Resources>
<Grid x:Name="mainGrid" Background="#FF252525">
<Button Content="Push Me" Template="{StaticResource buttonTemplate}" Name="button1" Height="100" Width="100"/>
</Grid>
</Window>
I want to have different color to each side of a border in WPF XAML. How can i do this.
<Border BorderThickness="1,2,3,4" BorderBrush="Blue"></Border>
A bit hacky, but it works.
<Grid>
<Border BorderThickness="1,0,0,0" BorderBrush="Blue"/>
<Border BorderThickness="0,2,0,0" BorderBrush="Red"/>
<Border BorderThickness="0,0,3,0" BorderBrush="Green"/>
<Border BorderThickness="0,0,0,4" BorderBrush="Orange"/>
</Grid>
Probably better to create your own Decorator.
Maybe?
<DockPanel LastChildFill="True">
<Rectangle Fill="Red" DockPanel.Dock="Top" Height="2"/>
<Rectangle Fill="Yellow" DockPanel.Dock="Left" Width="2"/>
<Rectangle Fill="Green" DockPanel.Dock="Right" Width="2"/>
<Rectangle Fill="Blue" DockPanel.Dock="Bottom" Height="2"/>
<Rectangle Fill="Wheat"/>
</DockPanel>
There is a hacky way that using four Border https://stackoverflow.com/a/1797045/5229294
<Border BorderThickness="0,0,0,10" BorderBrush="Green">
<Border BorderThickness="0,0,10,0" BorderBrush="Blue">
<Grid>
<Button>Hello</Button>
</Grid>
</Border>
</Border>
am trying to goto a page from main window by using I have put 4 rectangle around window for framing of main window .
But when I Navigate to page my bottom rectangle is getting shifted(as shown in picture. Its completely ok in main window.
my .xaml file for mainWindow is
<Window x:Class="Demo1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Demo" Height="652" Width="924" WindowStyle="None" ShowInTaskbar="True" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded"
>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="15">
<DockPanel Width="899">
<Frame x:Name="_mainFrame" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderBrush="Black" Background="LightBlue" CornerRadius="13" BorderThickness="1" Height="462" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Top" Width="732" Margin="90,80,15,15">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="10" Direction="330" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<DockPanel AllowDrop="True" HorizontalAlignment="Stretch" MinWidth="700" MinHeight="400" Background="LightBlue" Height="440" Width="700">
<!--change here-->
<Button Content="Button" Height="40" Name="button1" Width="89" Click="button1_Click" />
</DockPanel>
</Border>
<!--Bottom polygon-->
<DockPanel Height="74" Width="888" Margin="-846,520,10,-10">
<Polygon Name="polygon11" Points="0,60,80,0,810,0,875,60" Fill="LightCyan" Height="58" Width="890" Canvas.Left="-9" Canvas.Top="12" />
</DockPanel>
<!--left side polygon-->
<Canvas Height="557" Name="canvas5" Width="72" Margin="-1030,0,700,0" >
<Polygon Points="0,-10,60,45,60,500,0,545" Fill="LightCyan" Height="582" Width="67" Canvas.Top="1" Canvas.Left="18" />
</Canvas>
<!--Top polygon-->
<Canvas Height="55" Name="canvas7" Width="857" Margin="-890,-555,0,0" >
<Polygon Points="0,0,65,55,800,55,849,0" Fill="LightCyan" Height="59" Width="870" Canvas.Top="13" Canvas.Left="8" />
</Canvas>
<!--Right side polygon-->
<Canvas Height="545" Name="canvas6" Width="72" Margin="-80,40,0,80">
<Polygon Points="0,60,55,0,55,565,0,515" Fill="LightCyan" Height="583" Width="60" Canvas.Top="-14" Canvas.Left="12" />
</Canvas>
</DockPanel>
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="15" Direction="330" Opacity="0.5"></DropShadowEffect>
</Border.Effect>
</Border>
xaml.cs file is
private void button1_Click(object sender, RoutedEventArgs e)
{
_mainFrame.Navigate(new message_box.Page1());
}
Page1 has this code
<Page x:Class="message_box.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="652" d:DesignWidth="924"
Title="Page1">
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="15">
<DockPanel Width="899">
<Frame x:Name="_mainFrame" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderBrush="Black" Background="LightBlue" CornerRadius="13" BorderThickness="1" Height="462" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Top" Width="732" Margin="90,80,15,15">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="10" Direction="330" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<DockPanel AllowDrop="True" HorizontalAlignment="Stretch" MinWidth="700" MinHeight="400" Background="LightBlue" Height="440" Width="700">
</DockPanel>
</Border>
</DockPanel>
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="15" Direction="330" Opacity="0.5"></DropShadowEffect>
</Border.Effect>
</Border>
</Page>
You should place your items in a Grid instead. I updated what you should try, but you will have to update your polygons
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Frame Grid.Column="1" Grid.Row="1"/>
<Grid Grid.ColumnSpan="3" Grid.Row="3">
<Polygon Points="0,60,80,0,810,0,875,60" Fill="LightCyan"/>
</Grid>
<Grid Grid.Column="0" Grid.RowSpan="3">
<Polygon Points="0,-10,60,45,60,500,0,545" Fill="LightCyan" />
</Grid>
<Canvas Grid.ColumnSpan="3" Grid.Row="0">
<Polygon Points="0,0,65,55,800,55,849,0" Fill="LightCyan" />
</Canvas>
<Canvas Grid.Column="2" Grid.RowSpan="3">
<Polygon Points="0,60,55,0,55,565,0,515" Fill="LightCyan"/>
</Canvas>
</Grid>
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Black">
<!-- Rounded yellow border -->
<Border BorderThickness="3" BorderBrush="Yellow" CornerRadius="10" Padding="2"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<!-- Rounded mask (stretches to fill Grid) -->
<Border Name="mask" Background="White" CornerRadius="7"/>
<!-- Main content container -->
<StackPanel>
<!-- Use a VisualBrush of 'mask' as the opacity mask -->
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</StackPanel.OpacityMask>
<!-- Any content -->
<Image Source="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg"/>
<Rectangle Height="50" Fill="Red"/>
<Rectangle Height="50" Fill="White"/>
<Rectangle Height="50" Fill="Blue"/>
</StackPanel>
</Grid>
</Border>
</Page>
This XAML is from WPF – Easy rounded corners for anything but it doesn't work form me =(
<Border Canvas.Left="55"
Canvas.Top="30"
Width="100"
Height="Auto"
Margin="12,12,8,0"
VerticalAlignment="Top"
BorderBrush="#FF3B5998"
BorderThickness=".5"
CornerRadius="18">
<Border.Effect>
<DropShadowEffect BlurRadius="5"
Opacity=".5"
ShadowDepth="3" />
</Border.Effect>
<Border Name="ReceiverColor"
BorderBrush="#FF96B2E4"
BorderThickness="6"
CornerRadius="15">
<Border Name="Mask"
BorderBrush="#FF3B5998"
BorderThickness=".5"
CornerRadius="13">
<StackPanel>
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask}" />
</StackPanel.OpacityMask>
<Image Name="Receiver" />
</StackPanel>
</Border>
</Border>
</Border>
--- EDIT ---
I make borders sizes to auto and change source of image to an image from a link
when window loaded border size becomes as image size but image not shown !!!
You can define a <Border/> element and set its <Border.Background/>
property to an <ImageBrush/> , set the Borders CornerRadius property and you
are all set!
<Border CornerRadius="8,0,8,0">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="ImageSource"/>
</Border.Background>
</Border>
You forgot the Grid that makes the mask and the image siblings and nested the image in the mask. and you forgot to set the background of the mask.
This works:
<Grid>
<Border Canvas.Left="55"
Canvas.Top="30"
Width="100"
Height="Auto"
Margin="12,12,8,0"
VerticalAlignment="Top"
BorderBrush="#FF3B5998"
BorderThickness=".5"
CornerRadius="18">
<Border.Effect>
<DropShadowEffect BlurRadius="5"
Opacity=".5"
ShadowDepth="3" />
</Border.Effect>
<Border Name="ReceiverColor"
BorderBrush="#FF96B2E4"
BorderThickness="6"
CornerRadius="15">
<Grid>
<Border Name="Mask"
Background="White"
BorderBrush="#FF3B5998"
BorderThickness=".5"
CornerRadius="13">
</Border>
<StackPanel>
<Image Name="Receiver"
Source="/Images/test.jpg" />
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask}" />
</StackPanel.OpacityMask>
</StackPanel>
</Grid>
</Border>
</Border>
</Grid>
in wpf this one works for me
<Ellipse Width="50" Height="50">
<Ellipse.Fill>
<ImageBrush ImageSource="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg" />
</Ellipse.Fill>
</Ellipse>
None of the above answers worked for me completely. I was trying to implement rounded corners on image which could be resized and has properties Stretch="UniformToFill" VerticalAlignment="Center" and HorizontalAlignment="Center".
The center alignments keeps the middle part cropped as opposed to bottom and right side being cropped, when image is resized. Solutions with image brush were working but I was facing problem in keeping the content at center cropped.
The marked answer has a problem with transparent non rectangular images as the "mask" border will end up showing as white background. Following was the imlementation which worked for me:
<Grid>
<WrapPanel Name ="container">
<Image Source="sample_image.png" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="UniformToFill"/>
<WrapPanel.OpacityMask>
<VisualBrush >
<VisualBrush.Visual>
<Border Height="{Binding ElementName=container, Path=ActualHeight}"
Width="{Binding ElementName=container, Path=ActualWidth}"
Background="White" CornerRadius="15" />
</VisualBrush.Visual>
</VisualBrush>
</WrapPanel.OpacityMask>
</WrapPanel>
</Grid>
You can use an ellipse like how Usman Ali has said (I thought this myself and I didn't take it from him)
It's very simple, make an ellipse with the properties you want, then set the fill to an imagebrush with your desired image like this in XAML:
<Ellipse Height="Auto" Width="100">
<Ellipse.Fill>
<ImageBrush ImageSource="YOUR IMAGE SOURCE/LINK HERE"/>
</Ellipse.Fill>
</Ellipse>
In C#, if in any case you want to do in C#:
Ellipse YourEllipseName = new Ellipse
{
Height = 50,
Width = 50,
StrokeThickness = 0,
Fill = new ImageBrush
{
Stretch = Stretch.Uniform,
ImageSource = new BitmapImage(new Uri("YOUR IMAGE SOURCE HERE"))
}
};
<Grid Background="Black">
<Rectangle RadiusX="20" RadiusY="20"
Width="130"
Height="130">
<Rectangle.Fill>
<ImageBrush x:Name="myImage" ImageSource="C:\Path\Desktop\visual-studio-2010-logo.png"/>
</Rectangle.Fill>
</Rectangle>
</Grid>