In playing around with brushes I was wondering if it is possible to create a GradientBrush that goes around the outside edges of a Windows Phone page. For instance, for each side, the part farthest from the center of the screen would be the device's accent color or a gradient of colors, while the inner part would be PhoneBackgroundBrush or transparent (so a fading effect would be seen). I would only need the gradient to be a very small portion of the entire phone screen, and not stretch into the very center of the screen. I have already got an outline using a border with a gradient brush, but it looks like a flat border on the inside instead of the fading into the page effect I am trying to accomplish. How might I accomplish this task?
MainPage.xaml
<Grid x:Name="LayoutRoot" Background="Transparent">
<Border BorderThickness="5">
<Border.BorderBrush>
<LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
<GradientStop Color="yellow" Offset="0"/>
<GradientStop Color="blue" Offset="0.33"/>
<GradientStop Color="green" Offset="0.66"/>
<GradientStop Color="red" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Grid>
Related
Linear Gradient in UWP XAML works fine but I need to convert it to Radial Gradient brush.
Here is my current UWP XAML code
<Page
x:Class="button_radious.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:button_radious"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#000000" Offset="0.30"/>
<GradientStop Color="green" Offset="0.65"/>
<GradientStop Color="White" Offset="0.90"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Page>
RadialGradientBrush is not included by default as UWP API. You will need to add reference to the Windows Community Toolkit UI - Microsoft.Toolkit.Uwp.UI which contains RadialGradientBrush which you can use as expected, the same way as in WPF.
<Grid>
<Grid.Background>
<media:RadialGradientBrush
AlphaMode="Premultiplied"
RadiusX="0.2" RadiusY="0.2"
SpreadMethod="Reflect">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Transparent" Offset="0.25" />
<GradientStop Color="Yellow" Offset="0.50" />
<GradientStop Color="Transparent" Offset="0.75" />
<GradientStop Color="Green" Offset="1.0" />
</media:RadialGradientBrush>
</Grid.Fill>
</Grid>
Because the brush resides in the library, you will have to add the following namespace declaration to your Page element:
xmlns:media="Microsoft.Toolkit.Uwp.UI.Media"
I am sure I could do better with the title but here is what I am looking for. I have a UWP app where I want to achieve something like this screenshot:
Here is a snippet from my code:
<Border BorderBrush="Black">
<Grid>
<Rectangle Fill="Green" />
</Grid>
</Border>
I am trying to fill the Rectangle in the Grid with the shapes given in the screenshot. How can I do that?
So, while I don't have a way to test on UWP at the moment, I assume things like LinearGradientBrush and MappingMode are supported since this way would work on WPF, Silverlight, whatever else... With that assumption, give this a shot.
<Rectangle Stroke="LightBlue" StrokeThickness="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="6,4"
MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Color="LightBlue" Offset="0.25"/>
<GradientStop Color="#00000000" Offset="0.15"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
You might tweak your Starts/Ends/Offsets for desired angle and size but it conveys the concept. For example if you increase your EndPoint numbers you'll get the thicker lines like in your example.
You can also turn the brush into a resource and use it as a resource for Paths, or Backgrounds, or whatever supports LinearGradientBrush usually. Hope this helps, cheers.
PS - Some other neat things you can do with them that should be easy to port to UWP.
Addendum:
This is closer to your example to save you a little trouble, notice the differences.
<Rectangle Stroke="LightBlue" StrokeThickness="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="8,0" EndPoint="18,8"
MappingMode="Absolute" SpreadMethod="Repeat">
<GradientStop Color="LightBlue" Offset="0.15"/>
<GradientStop Color="White" Offset="0.05"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
I have a grid with a semi transparent background, and I'd like the user to be able to tap the background to close the popup.
Now I have this XAML:
<Grid
Tapped="Close_Tapped">
<Grid.Background>
<SolidColorBrush Color="Black" Opacity=".75"/>
</Grid.Background>
<!-- Inner border -->
<Border
Background="White"
CornerRadius="5">
<!-- Other items -->
</Border>
</Grid>
And the Tapped event should only be applied to the Grid background, but obviously this applies it to the entire grid.
Any ideas to have this Tapped event only work on the background?
You can either check if e.OriginalSource in the Close_Tapped event handler is aGrid or add another element to the Grid, below other elements, which will become your background and then move Tapped handler there
<Grid>
<Border Tapped="Close_Tapped">
<Border.Background>
<SolidColorBrush Color="Black" Opacity=".75"/>
</Border.Background>
</Border>
<!-- Inner border -->
<Border
Background="White"
CornerRadius="5">
<!-- Other items -->
</Border>
</Grid>
A designer did some work and styled the Telerik RadWinodow for Silverlight. He wasn't able to figure this out and I'm having trouble with it too.
It looks like he applied a style to the WindowInnerBorder template. It adds a button and some effects.
I believe this is the style, it is applied to a Grid contained in the WindowInnerBorder of the RadWindowTemplate:
<Style x:Key="MainLabelRibbon" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Path Data="M -1,-1 C-1,-1 500,-1 500,-1 500,-1 456,43 456,43 456,43 43,43 43,43 43,43 -1,-1 -1,-1 z" Opacity="1" Stretch="Fill" Stroke="White" StrokeThickness="1" UseLayoutRounding="False">
<Path.Effect>
<DropShadowEffect Direction="275" BlurRadius="7" ShadowDepth="7" Opacity="0.3"/>
</Path.Effect>
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FF029D05" Offset="0.834"/>
<GradientStop Color="#FF0ECA0E" Offset="0.432"/>
<GradientStop Color="#FF026C02" Offset="0.983333"/>
<GradientStop Color="#FF04A906" Offset="0.008"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<UserControl FontSize="18.667" FontFamily="{StaticResource MainFontFamily}" FontWeight="Bold" Foreground="White" Margin="0,-3,0,3">
<UserControl.Effect>
<DropShadowEffect Direction="296" ShadowDepth="2" BlurRadius="3"/>
</UserControl.Effect>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</UserControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Which looks like this:
My question is, what do I need to do or is it possible to make the windows draggable when clicking on the label?
Inside the RadWindow style, there is a Thumb control which makes the window draggable. I think your designer replaced it with a Button control and that's why it is not working. Also, using a Button here doesn't make any sense.
To fix it is very simple. Instead of applying this style to a Button, you can change the TargateType to point to a Thumb. And then inside the style, replace the Button control with a Thumb control.
Hope this helps. :)
I'm walking through Adam Kinney's Blend tutorials (http://visitmix.com/labs/rosetta/EyesOfBlend/) and I'm seeing some puzzling behavior with resizing objects. Specifically, at this step (http://visitmix.com/labs/rosetta/EyesOfBlend/Drawing/#08) I'm seeing two different behaviors resizing elements. Before I group the 3 circles into a grid, if I select all 3 they all resize the way I would intend with each circle growing and shrinking to the appropriate size to maintain the original proportion and position. Now, if I group the circles into a grid and then try to resize, resizing still occurs but the proportion of the 2 inner circles does not hold. Ultimately, if I want to try resizing everything on the page, I get the latter behavior which isn't what I want. Is this intended behavior of resizing within a grid? XAML below:
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse Margin="120,40" Stroke="Black" StrokeThickness="5">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFFDF365" Offset="0.349"/>
<GradientStop Color="#FFDEAE32" Offset="1"/>
<GradientStop Color="#FFFEE834" Offset="0.711"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Grid HorizontalAlignment="Left" Height="105" Margin="187,111,0,0" VerticalAlignment="Top" Width="105">
<Ellipse Stroke="Black" StrokeThickness="5">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF545454" Offset="1"/>
<GradientStop Color="White" Offset="0.845"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Fill="#FF935D09" Margin="31,30,30,31" Stroke="Black" StrokeThickness="5"/>
<Ellipse Fill="White" Margin="38,38,50,50" Stroke="Black" StrokeThickness="0"/>
</Grid>
</Grid>
The resizing behavior depends on which handles you grab, which may not be evident until you zoom in. I've posted a blog entry that hopefully explains what is going on.