I need to make this shape on a windows phone 8 using XAML:
It is easy to make a rectangle with rounded corners, and the gray background also. But to make the top of the rectangle to be as shown seems very hard. Can someone give me a hint? It's been 2 years since I used XAML, and I am removeing the rust.
nah not really, it's actually pretty simple and there's multiple ways to accomplish the same effect. Here's an example.
<Grid Width="150" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border CornerRadius="10,10,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.822,0.633" StartPoint="0.158,0.189">
<GradientStop Color="#FF09CCF4" Offset="0"/>
<GradientStop Color="#FF020CA7" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Blah" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
</Border>
<Border Grid.Row="1" Background="White" CornerRadius="0,0,10,10"/>
<TextBlock Grid.Row="1" Text="Other Stuff" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
You can trade the Border 's that were used for Rectangle's if you like, hope this helps.
Related
I want to learn how to utilize fontstretch in my wpf applications.
I've created this simple usercontrol, a border with rounded corners which has a textblock. I want to stretch the text of the textblock to fill my border. I want to avoid the use of the viewbox control to do this.
this is my usercontrol xaml
<UserControl x:Class="DisplayObject"
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="300" d:DesignWidth="400" Background="Transparent">
<UserControl.Resources>
<LinearGradientBrush x:Key="BackGroundBrush" StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="AntiqueWhite" Offset="0"/>
<GradientStop Color="White" Offset="0.45" />
<GradientStop Color="Silver" Offset="1" />
</LinearGradientBrush>
</UserControl.Resources>
<Border x:Name="LayoutRoot" CornerRadius="12" Background="{StaticResource BackGroundBrush}" BorderBrush="Black" BorderThickness="2">
<TextBlock TextAlignment="Center" Text="{Binding Path=DisplayText}"
Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center"
TextWrapping="Wrap" FontSize="12" FontFamily="Arial" FontStretch="UltraExpanded"/>
</Border>
</UserControl>
From what I gather from reading online the Arial font is an opentype so it supports stretching. I tried using horizontal/vertical alignment values of "Stretch" but this did not help. Not sure what I have done wrong but I figured someone on this site may be able to explain why its not stretching for me, and how to fix it.
Thanks for reading my post.
The Arial font does not seem to support the FontStretch value of UltraExpanded. Try the value of UltraCondensed instead to see it work:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding DisplayText}" FontSize="30"
FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Row="1" Text="{Binding DisplayText}" FontSize="30"
FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Center"
FontStretch="UltraCondensed" />
</Grid>
Look at the Why FontStretch does not work in WPF? post to find out an alternative to using this little used property.
How to provide the outer glow effect to border?
<Grid Width="200" Height="200">
<Grid.Background>
<RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.8" RadiusY="0.8">
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0" Color="#FF123B5F" />
<GradientStop Offset="1" Color="#FF001F31" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Grid.Background>
<Border Width="180" Height="180" Margin="10" Background="Transparent"
BorderBrush="White" BorderThickness="1">
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="White" GlowSize="3" Opacity="1" />
</Border.BitmapEffect>
</Border>
</Grid>
I have tried this but it not working
BitmapEffects are no longer supported in .NET 4.0.
From MSDN
Important In the .NET Framework 4 or later, the BitmapEffect class is
obsolete. If you try to use the BitmapEffect class, you will get an
obsolete exception. The non-obsolete alternative to the BitmapEffect
class is the Effect class. In most situations, the Effect class is
significantly faster.
It isn't the same thing but you can try with a DropShadowEffect with ShadowDepth close to 0 instead.
Example
<Border Width="180" Height="180" Margin="10" Background="Transparent"
BorderBrush="White" BorderThickness="2" Opacity="1.0">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="White"
Opacity="1"
BlurRadius="5"/>
</Border.Effect>
</Border>
Comparison between the BitmapEffects you had and DropShadowEffect above. DropShadowEffect to the right.
I have a Grid with various child elements like Grid, Stackpanel, Image...Is it possible to round the corners of the grid in a way that crops ALL of the contents? Additionally, the root Grid can vary in size so that cannot be hard coded.
Edit: After a great deal of searching I found that the best solution for this problem is using ClippingBehavior as susggested by #wdavo, thanks! The real problem is not knowing the dimensions of the image. If you know the dimensions then there are many simple out of the box solutions out there.
You can use this clipping behavior
http://expressionblend.codeplex.com/SourceControl/changeset/view/61176#494852
You'll need the Expression Blend SDK installed
<UserControl
x:Class="RoundedCorners.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:behaviors="clr-namespace:Expression.Samples.Interactivity"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
d:DesignHeight="800"
d:DesignWidth="800">
<Grid
x:Name="LayoutRoot"
Background="White"
Margin="50">
<Grid
Background="LightGreen">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<i:Interaction.Behaviors>
<behaviors:ClippingBehavior
CornerRadius="30" />
</i:Interaction.Behaviors>
<Image
Grid.Row="0"
Stretch="Fill"
Source="Image.JPG" />
<StackPanel
Grid.Row="1">
<TextBlock
Text="Hello" />
<TextBlock
Text="World" />
</StackPanel>
</Grid>
</Grid>
You can do that by inserting the grid or stack panel to a border control just like the code below:
<Border CornerRadius="5,5,0,5" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Center" Width="100" Height="100" VerticalAlignment="Center">
<StackPanel>
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF030FC6" Offset="0.2"/>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</Border>
<Border CornerRadius="5,5,0,5" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Left" Width="100" Height="100" VerticalAlignment="Center" Margin="68.833,0,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFE90D0D" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid/>
</Border>
Im trying to create a stackpanel with a rounded background, that also has a linearbrush from grey to trasparent
I used the ideas exposed here to prevent clipping
http://chriscavanagh.wordpress.com/2008/10/03/wpf-easy-rounded-corners-for-anything/
The problem now is that the text inside the stackpanel also has degradation and then turns invisible
any help?
Similar question
How do I create a WPF Rounded Corner container?
Code:
<Border Margin="235,78,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"
BorderBrush="Red" BorderThickness="1" CornerRadius="8" >
<Grid>
<Border Name="mask" CornerRadius="7">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="Gray" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<StackPanel Orientation="Horizontal" >
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</StackPanel.OpacityMask>
<Image Height="16" Width="16" RenderOptions.BitmapScalingMode="NearestNeighbor" />
<TextBlock Foreground="Black" Margin="5,0,3,0" Text="00620"/>
<TextBlock Foreground="Black" Margin="5,0,3,0" Text="Error sincronización" />
</StackPanel>
</Grid>
</Border>
This is due to the OpacityMask, try to remove these lines from your XAML:
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</StackPanel.OpacityMask>
And it should work
I am populating a ListBox withe Shipment objects and I am using an ItemContainerStyle to define how I want the items displayed. Everything is working smoothly with one exception.
The template uses a Grid that is inside of two borders. The grid has 7 columns, the last is specified to contain a border that will end up being a glowing gem to denote the active (not necessarily the selected package). The template is set to expand to the width of the listbox. And I cannot figure out how to get the gem to align to the right side of the container. Below is the XAML:
<Border Background="#FFFFB78F" Margin="-2,0,0,0">
<Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFCCB0" Offset="0"/>
<GradientStop Color="#FFFFCCB0" Offset="1"/>
<GradientStop Color="#FFFCE8DD" Offset="0.5"/>
</LinearGradientBrush>
</Border.Background>
<Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" x:Name="Image"/>
<ColumnDefinition Width="150" x:Name="Names"/>
<ColumnDefinition Width="120" x:Name="Address"/>
<ColumnDefinition Width="120" x:Name="Dates"/>
<ColumnDefinition Width="200" x:Name="OtherInfo"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/>
<StackPanel Grid.Column="1" Margin="4,4,4,0">
</StackPanel>
<StackPanel Grid.Column="2" Margin="4,4,4,0">
<StackPanel Orientation="Horizontal">
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="3" Margin="4,4,4,0">
</StackPanel>
<StackPanel Grid.Column="4" Margin="4,4,4,0">
</StackPanel>
<!-- Gem -->
<Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" d:LayoutOverrides="GridBox">
<Border.Background>
<RadialGradientBrush>
<GradientStop Color="#FF760000" Offset="1"/>
<GradientStop Color="Red"/>
<GradientStop Color="#FEFF0000" Offset="0.15"/>
</RadialGradientBrush>
</Border.Background>
</Border>
<Grid Margin="0,0,-298.067,0" VerticalAlignment="Top" Height="13.277" Grid.Column="6" >
</Grid>
</Grid>
</Border>
</Border>
The Gem Border is toward the bottom. Initially I created the containing grid with a column set to Auto in the hopes that it would fill the remaining space, pushing the last column over to the right edge, but grid columns don't really work that way. I also tried putting a hidden textblock filled with space characters in there to try and get it to expand (hoping that it would continue to constrain itself to the list boxes width, also to no avail.
To expand to remaining space you need a column set to Width="*". Auto indicates that the column should size to fit its contents, where * indicates that it should fill its parent.
Without seeing the rest of your XAML I expect that you're also getting the default Left alignment for your ListBoxItems so just the * width will give you the same behavior. You can fix that by setting HorizontalContentAlignment="Stretch" on the parent ListBox (unless you have other things going on with your ListBox layout not shown here).
Well you can put the grid into another grid, and add Gem to the outer grid, with HorizontalAlignment="Right". E.g.:
<Border Background="#FFFFB78F" Margin="-2,0,0,0">
<Border BorderBrush="#FF636363" BorderThickness="1" CornerRadius="8" Margin="0,2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFCCB0" Offset="0"/>
<GradientStop Color="#FFFFCCB0" Offset="1"/>
<GradientStop Color="#FFFCE8DD" Offset="0.5"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid Margin="6,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" x:Name="Image"/>
<ColumnDefinition Width="150" x:Name="Names"/>
<ColumnDefinition Width="120" x:Name="Address"/>
<ColumnDefinition Width="120" x:Name="Dates"/>
<ColumnDefinition Width="200" x:Name="OtherInfo"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Image x:Name="CarrierImage" Grid.Column="0" Margin="7,0" Height="45" Width="50"/>
<StackPanel Grid.Column="1" Margin="4,4,4,0">
</StackPanel>
<StackPanel Grid.Column="2" Margin="4,4,4,0">
<StackPanel Orientation="Horizontal">
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="3" Margin="4,4,4,0">
</StackPanel>
<StackPanel Grid.Column="4" Margin="4,4,4,0">
</StackPanel>
</Grid>
<!-- Gem -->
<Border HorizontalAlignment="Right" Margin="0,8,5,7" Width="15" Height="Auto" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Grid.Column="6" >
<Border.Background>
<RadialGradientBrush>
<GradientStop Color="#FF760000" Offset="1"/>
<GradientStop Color="Red"/>
<GradientStop Color="#FEFF0000" Offset="0.15"/>
</RadialGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
But I'm pretty sure there are many other ways to improve this XAML. Maybe if you give us a picture, we could give better solution? One picture worth hundred words, you know :)...
Cheers, Anvaka.