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.
Related
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 want to display large image in small control such that entire image can be scrolled.
for this, i have used following code but i could only succeed in achieving vertical scrolling.
what should i do for enabling both, horizontal and vertical scrolling ?
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Width="470">
<ScrollViewer x:Name="scrollViewer" Width="470" Height="270" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Name="drag" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</ScrollViewer>
</Grid>
if there is any other solution than using scrollviewer then please share it, or mention any changes in this code which are useful for achieving the same.
Try
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Width="470">
<ScrollViewer x:Name="scrollViewer" Width="470" Height="270" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Name="drag" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</ScrollViewer>
</Grid>
You need to set HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties to achieve desired scrolling.
Edit :
If you want to see the scroll bars always you can set HorizontalScrollBarVisibility="Visible" and VerticalScrollBarVisibility="Visible" .Otherwise("Auto") scroll bars will appear based on the content size
I have such DataTemplate:
<DataTemplate x:Name="GreenMarkTemplate">
<Grid Width="64" Height="64">
<Image Source="Assets/Marks/mark_green.png" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="{Binding course}" />
</Image.RenderTransform>
</Image>
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding route_num}" VerticalAlignment="Center" FontSize="16"/>
</Grid>
</DataTemplate>
And I need to rotate Image according to "course" property. At first, Image shows with zero angle and in a moment it rotates. This makes Image blinking.
So, is it possible somehow to make Image invisible and show it only after rotation? or rotate image before rendering it?
Resolved the issue using LayoutTransform port for Windows Phone 8. github link
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 have a ControlTemplate with some Paths in it. I would like the Paths to stretch and fill the control they are in, such as a Button. How can I do this?
What I have currently looks like this:
<ControlTemplate x:Key="SomeTemplate" TargetType="Button">
<Canvas Background="AliceBlue">
<Path Data="M 99.5,50 A 49.5,49.5 0 1 1 0.5,50 A 49.5,49.5 0 1 1 99.5,50 z"
Fill="White" Stroke="Black" StrokeThickness="1" />
<Path Data="M 15,50 C 17.5,22.5 47.5,22.5 50,50 C 52.5,77.5 82.5,77.5 85,50"
Stroke="Black" StrokeThickness="1" />
</Canvas>
</ControlTemplate>
...
<Button Template="{StaticResource SomeTemplate}" Height="120" Width="120" />
I am aware of ScaleTransform's StrechX and StretchY attributes, but they are only proportional scaling of the original Path's size.
Would I use a value converter? Or perhaps some form of relative binding to the parent's size?
Throwing a ViewBox around the Canvas in your example should work.
To stretch a Path use the Stretch property. It works just like image stretching - described here: https://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx (System.Windows.Media > Stretch Enumeration). In the case shown below, setting the value to Uniform will preserve the path width-height ratio filling the control which it occupies so that the whole path is visible.
<Path Stretch="Uniform" Data="..."/>
There is a side-effect: Stretching a Path this way will "normalize" its data i.e. even if the data would be written so that all the points are transformed from the origin [1], when stretch the transform is omitted [2] (hope i'm explaining this clearly).
You can use this to your advantage when having a messy object from Inkscape for example (not transformed to the origin) not worrying about the transformed data.
<Grid Width="200" Height="200">
<TextBlock Text="(0,0)" />
<TextBlock Text="(200,200)" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
<Path Stroke="Blue" Stretch="None" Fill="Beige" Data="M 63,50 82,86 107,62 84,65 Z"/>
<Rectangle Stroke="Red" StrokeThickness="1"/>
</Grid>
<Grid Width="200" Height="200">
<TextBlock Text="(0,0)" />
<TextBlock Text="(200,200)" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
<Path Stroke="Blue" Stretch="Uniform" Fill="Beige" Data="M 63,50 82,86 107,62 84,65 Z"/>
<Rectangle Stroke="Red" StrokeThickness="1"/>
</Grid>