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>
Related
I'm trying to create a UWP calculator app and for the display I have a slight issue. The calculator is the type that you input the text and eventually click enter and it respects orders of operation. As such, the input may get quite long so I'll need a scrollviewer around a textbox. I'm working on Windows 10 Creator's Update but the app should be backwards compatible to release version if possible.
I intend on using buttons to control cursor position, but I'd still like to have a scrollbar to indicate where you are, horizontally, in the long string. I can't figure out how to make the scrollbar there only as a visual indicator, not as a way of controlling the scrollviewer. When the mouse cursor goes near it the scrollbar expands and allows user input; this I want to avoid.
This is my display currently, very basic. How would I go about modifying that scrollviewer to my purposes?
<Border>
<ScrollViewer HorizontalScrollMode="Auto" VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Auto">
<TextBox IsReadOnly="True" Margin="5" FontSize="24" Text="long string of testing text"/>
</ScrollViewer>
</Border>
Disable hit testing on the ScrollBar:
<Border>
<ScrollViewer HorizontalScrollMode="Auto"
VerticalScrollMode="Disabled"
HorizontalScrollBarVisibility="Auto">
<ScrollViewer.Resources>
<Style TargetType="ScrollBar">
<Setter Property="IsHitTestVisible"
Value="False"/>
</Style>
</ScrollViewer.Resources>
<TextBox IsReadOnly="True"
Margin="5"
FontSize="24"
Text="long string of testing text" />
</ScrollViewer>
</Border>
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>
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. :)
This is probably something simple but I am tearing my hair out at the moment.
I want to display pushpins on a map from a model. So I have created a template for the pushpins
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="Resources/Pushpins/img.png" Stretch="Fill"/>
</Grid>
</ControlTemplate>
Then use it to a binded collection as follows:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}" Template="{StaticResource PushpinTemplate}" />
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
But what I want to be able to do is change the image source via a binding but am not sure how I go about doing this. What I was intending to do was to use a converter to change the image depending on an id within the collection if that alters the best way to do this.
Edit:
I got a little further:
<m:MapLayer x:Name="myPushpinLayer">
<m:MapItemsControl x:Name="myPushpins" ItemsSource="{Binding PushpinCollection}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}"/>
<m:Pushpin.Template>
<ControlTemplate>
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding Type,Converter={StaticResource ImageConverter}}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
</m:Pushpin.Template>
</m:Pushpin>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:MapLayer>
If I move the pushpin template into the </phone:PhoneApplicationPage.Resources> section then it fails. I am not sure why. I guess now I am trying to get to grips with my uinderstanding of how this all works
Just add the binding to the ControlTemplate
<ControlTemplate x:Key="PushpinTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="32" Height="32" Margin="0">
<Image Source="{Binding ImageUri}" Stretch="Fill"/>
</Grid>
</ControlTemplate>
I would recommend a ImageUri (of type Uri) property that reflects what image to display, rather than using a converter. But a converter might also work, the bindings are done in the same way.
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.