WPF rectangle anchor - c#

I have a canvas and I set a background image to it. I have some rectangles within the canvas. When the form gets resized, the background image gets strechted but I also want the rectangles to get to the new positions. Any help?
<Window x:Class="abc.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:jas="clr-namespace:foo"
Title="foo" Width="1200" Height="800" >
<jas:DragCanvas x:Name="jasCanvas" >
<jas:DragCanvas.Background>
<DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,20,20" ViewportUnits="Absolute">
<!-- a drawing of 4 checkerboard tiles -->
<DrawingBrush.Drawing>
<DrawingGroup>
<!-- checkerboard background -->
<!--<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,20,20" />
</GeometryDrawing.Geometry>
</GeometryDrawing>-->
<!-- two checkerboard foreground tiles -->
<!--<GeometryDrawing Brush="LightGray">
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,10,10" />
<RectangleGeometry Rect="10,10,10,10" />
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>-->
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</jas:DragCanvas.Background>
<TextBlock x:Name="m_resultText" FontSize="16" Canvas.Left="10" Canvas.Top="10"
jas:DragCanvas.CanBeDragged="False"
FontWeight="Bold"
Background="Black"/>
<Rectangle x:Name="m_redRect" Width="40" Height="120" Canvas.Left="100" Canvas.Top="50" Stroke="Gray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
StrokeThickness="1" >
<Rectangle.Fill>
<!--<SolidColorBrush Color="#99FF0000"/>-->
<ImageBrush ImageSource="Media/yacht.png" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<RotateTransform x:Name="m_redRectRotate" Angle="0" CenterX="20" CenterY="60"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="m_greenRect" Width="40" Height="120" Canvas.Left="247" Canvas.Top="113" Stroke="Gray"
StrokeThickness="1"
>
<Rectangle.Fill>
<!--<SolidColorBrush Color="#9900FF00" />-->
<ImageBrush ImageSource="Media/yacht.png"/>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<RotateTransform x:Name="m_greenRectRotate" Angle="0" CenterX="20" CenterY="60"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="m_greenRect2" Width="40" Height="120" Canvas.Left="338" Canvas.Top="113" Stroke="Gray"
StrokeThickness="1"
>
<Rectangle.Fill>
<!--<SolidColorBrush Color="#9900FF00" />-->
<ImageBrush ImageSource="Media/yacht.png"/>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<RotateTransform x:Name="m_greenRectRotate2" Angle="0" CenterX="20" CenterY="60"/>
</Rectangle.RenderTransform>
</Rectangle>
<Button Content="Button" Canvas.Left="464" Canvas.Top="10" Width="75" Click="Button_Click" x:Name="buton" jas:DragCanvas.CanBeDragged="false"/>
</jas:DragCanvas>
</Window>
here is the background image set :
ImageBrush ib = new ImageBrush();
ib.ImageSource = new BitmapImage(new Uri(#"Media\foo.jpg", UriKind.Relative));
jasCanvas.Background = ib;


There is a very simple solution that you can use... just put your Canvas inside a ViewBox control. From the linked page on MSDN, the ViewBox Defines a content decorator that can stretch and scale a single child to fill the available space:
<ViewBox Stretch="Fill">
<jas:DragCanvas x:Name="jasCanvas">
...
</jas:DragCanvas>
</ViewBox>
If it doesn't work straight out of the box, then just experiment with the Stretch and StretchDirection properties.


I'm not sure about your jas namespace, but there is no layout system support in standard Canvas panel. So if you want something placed inside canvas to move and resize automatically due to parent canvas position change you have to create some code for this behavior manually.
Modify your XAML code like this:
<jas:DragCanvas x:Name="jasCanvas" SizeChanged="jasCanvas_SizeChanged">
And then in your code behind file:
private void Canvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
var deltaWidth = (e.NewSize.Width - e.PreviousSize.Width);
m_redRect.Width += deltaWidth;
// and so on
}

Related

Is it possible to use WPF ResourceDictionary with parameters?

I have stored some icons as XAML-Code in the resourcedictionary, e.g.
<DataTemplate x:Key="Question">
<Viewbox Width="16" Height="16" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Rectangle Width="16" Height="16">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M10,14L6,14 6,9C6,8.232,6.29,7.531,6.765,7L4,7 4,5C4,3.262 5.682,2 8,2 10.316,2 12,3.262 12,5L12,7C12,8.304,11.164,9.416,10,9.828z" />
<GeometryDrawing Brush="#FF414141" Geometry="F1M9,11L7,11 7,13 9,13z M9,10L7,10 7,9C7,7.897,7.897,7,9,7L9,5.203C8.84,5.115 8.495,5 8,5 7.504,5 7.159,5.115 7,5.203L7,6 5,6 5,5C5,3.841 6.261,3 8,3 9.738,3 11,3.841 11,5L11,7C11,8.103,10.102,9,9,9z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Viewbox>
</DataTemplate>
The problem: width and height are fixed values. So i changed the fixed values to "Auto" without any error in the resourcedictionary.
<DataTemplate x:Key="QuestionAuto">
<Viewbox Width="Auto" Height="Auto" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Rectangle Width="Auto" Height="Auto">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M10,14L6,14 6,9C6,8.232,6.29,7.531,6.765,7L4,7 4,5C4,3.262 5.682,2 8,2 10.316,2 12,3.262 12,5L12,7C12,8.304,11.164,9.416,10,9.828z" />
<GeometryDrawing Brush="#FF414141" Geometry="F1M9,11L7,11 7,13 9,13z M9,10L7,10 7,9C7,7.897,7.897,7,9,7L9,5.203C8.84,5.115 8.495,5 8,5 7.504,5 7.159,5.115 7,5.203L7,6 5,6 5,5C5,3.841 6.261,3 8,3 9.738,3 11,3.841 11,5L11,7C11,8.103,10.102,9,9,9z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Viewbox>
</DataTemplate>
Then i used the icon in my view with setting the width and height values, but nothing is shown. the "fixed" icon works, the "auto" icon not.
<ContentPresenter Grid.RowSpan="2"
ContentTemplate="{StaticResource Question32}"
Margin="20,0">
</ContentPresenter>
vs.
<ContentPresenter Grid.RowSpan="2"
ContentTemplate="{StaticResource QuestionAuto}"
Margin="20,0"
Width="64"
Height="64">
</ContentPresenter>
Is it possible to set width and height parameter in the xaml-view and use them in the resourcedictionary? because the xaml-icon is basically "dynamic" and a variable size would be better than guessing the width and height to fit perfectly.

Better define the icons as DrawingImage resources like
<DrawingImage x:Key="Question">
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M10,14L6,14 6,9C6,8.232,6.29,7.531,6.765,7L4,7 4,5C4,3.262 5.682,2 8,2 10.316,2 12,3.262 12,5L12,7C12,8.304,11.164,9.416,10,9.828z" />
<GeometryDrawing Brush="#FF414141" Geometry="F1M9,11L7,11 7,13 9,13z M9,10L7,10 7,9C7,7.897,7.897,7,9,7L9,5.203C8.84,5.115 8.495,5 8,5 7.504,5 7.159,5.115 7,5.203L7,6 5,6 5,5C5,3.841 6.261,3 8,3 9.738,3 11,3.841 11,5L11,7C11,8.103,10.102,9,9,9z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
and show them in an Image element like
<Image Source="{StaticResource Question}" Width="64" Height="64"/>
The drawing would stretch to the desired size according to the Stretch property of the Image, which defaults to Uniform.

Not able to draw horizontal line on canvas if the value of x2 is more than 125020

I'm trying to draw lines on a canvas but i'm not able to draw it if the value of x2 is more than 125020. Please find the XAML code below.`I'm able to see lines if the value of x2 is equal to or below 125020.
<ScrollViewer Name="C1_S" Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" VerticalAlignment="Bottom" Grid.ColumnSpan="2" >
<Canvas Name="canvas_core0" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="640" Width="1000000" MouseWheel="Canvas_MouseWheel" >
<Line Stroke="Black" X1="20" Y1="20" X2="20" Y2="620" StrokeEndLineCap="Triangle" StrokeDashCap="Triangle" />
<Line Stroke="Black" X1="20" Y1="220" X2="125021" Y2="220" StrokeEndLineCap="Triangle" StrokeDashCap="Triangle" />
<Line Stroke="Black" X1="20" Y1="420" X2="{Binding ElementName=canvas_core0, Path=Width}" Y2="420" StrokeEndLineCap="Triangle" StrokeDashCap="Triangle" />
<Line Stroke="Black" X1="20" Y1="620" X2="{Binding ElementName=canvas_core0, Path=Width}" Y2="620" StrokeEndLineCap="Triangle" StrokeDashCap="Triangle" />
<Canvas.Background>
<DrawingBrush TileMode="Tile" Viewport="0,20,40,40" ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,50,50"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Gray" Thickness=".1"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Canvas.Background>
<Canvas.RenderTransform>
<MatrixTransform/>
</Canvas.RenderTransform>
</Canvas>
</ScrollViewer>
Can anyone help? Is there any limit for the length of a line while drawing on a canvas?

Huh, must be a bug with WPF drawing long horizontal lines.
I don't have a real answer for you but a work around might be to NOT draw horizontal lines. Instead draw nearly horizontal lines. If you change Y1 or Y2, but not both, from "220" to "220.00001" then the line is visible. Note that "220.000001" (one more 0) did not draw so that seems to be another limit of some sort.
I tested it with X2="125021000" (added three 0s) and the line still showed up.

Increasing the StrokeThickness (even only slightly) works.
I realise this answer is somewhat unsatisfactory but may help if you are desperate and is at least a clue.
I tried playing with UseLayoutRounding and SnapsToDevicePixels but couldn't make it work.
Interesting.

Load custom polygon as button image in WPF

I have made a small cross icon using a polygon as following:
<Viewbox Margin="28,-22,-28,22">
<Polygon
Points="300, 200 325,200 325,250 375,250 375,275 325,275 325,325 300,325 300,275 250,275 250,250 300,250 300,200" Height="513" Width="595">
<Polygon.Fill>
<SolidColorBrush Color="#666666" Opacity="100"/>
</Polygon.Fill>
<Polygon.RenderTransform>
<RotateTransform CenterX="313" CenterY="237" Angle="45" />
</Polygon.RenderTransform>
</Polygon>
</Viewbox>
Now I want this polygon to be loaded into my button. How can I do this?

Put that inside Button.Content:
<Button ...>
<Viewbox ...>
</Viewbox>
</Button>
Don't forget to remove ViewBox.Margin (make Button big enough) or make it negative.

How to link Splash Screen with Login Window and Main Window

I've got a WPF application with these three separated things:
Splash Screen
Login Window
Main Window
When I open the application, the Splash Screen will show for a while first, then goes to the Login Window. After user login successful, the Splash Screen will display for a while again and finally comes to the Main Window. Is it dealing with Threads? Any suggestions on how to link those three things together?

you could do this with SplashScreen class. you have to show/hide the splash screen within the constructors of both windows.
Public LoginWindow ()
{
//Show splash screen
SplashScreen splashScreen = new SplashScreen("imageSource");
splashScreen.Show(false, false);
//Do any operation here
//Closing the Splashscreen with fadding effect
splashScreen.Close(TimeSpan.FromSeconds(1));
}
Public MainWindow ()
{
//Show splash screen
SplashScreen splashScreen = new SplashScreen("imageSource");
splashScreen.Show(false, false);
//Do any operation here
//Closing the Splashscreen with fadding effect
splashScreen.Close(TimeSpan.FromSeconds(1));
}

Well, I think that this might help you:
-> http://blog.dontpaniclabs.com/post/2013/11/14/Dynamic-Splash-Screens-in-WPF
You can show the slapshScreen while your are loading anyting or you just use threads.

splash.xaml
<UserControl x:Class="IS.Pages.Home"
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" Foreground="White"
d:DesignHeight="660" d:DesignWidth="1080" >
<Grid Style="{StaticResource ContentRoot}" Opacity="0.5">
<ScrollViewer Margin="0,0,0,-10">
<Grid >
<TextBlock FontSize="60" x:Name="OpenTime" Margin="200,100,200,400" TextAlignment="Center" TextWrapping="Wrap" />
<Grid x:Name="LayoutRoot" Background="Transparent"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RenderTransform>
<ScaleTransform x:Name="SpinnerScale"
ScaleX="1.0" ScaleY="1.0" />
</Grid.RenderTransform>
<Canvas RenderTransformOrigin="0.5,0.5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="120" Height="120" >
<Ellipse Width="21.835" Height="21.862"
Canvas.Left="20.1696"
Canvas.Top="9.76358"
Stretch="Fill" Fill="Black"
Opacity="1.0"/>
<Ellipse Width="21.835" Height="21.862"
Canvas.Left="2.86816"
Canvas.Top="29.9581" Stretch="Fill"
Fill="Black" Opacity="0.9"/>
<Ellipse Width="21.835" Height="21.862"
Canvas.Left="5.03758e-006"
Canvas.Top="57.9341" Stretch="Fill"
Fill="Black" Opacity="0.8"/>
<Ellipse Width="21.835" Height="21.862"
Canvas.Left="12.1203"
Canvas.Top="83.3163" Stretch="Fill"
Fill="Black" Opacity="0.7"/>
<Ellipse Width="21.835" Height="21.862"
Canvas.Left="36.5459"
Canvas.Top="98.138" Stretch="Fill"
Fill="Black" Opacity="0.6"/>
<Ellipse Width="21.835" Height="21.862"
Canvas.Left="64.6723"
Canvas.Top="96.8411" Stretch="Fill"
Fill="Black" Opacity="0.5"/>
<Ellipse Width="21.835" Height="21.862"
Canvas.Left="87.6176"
Canvas.Top="81.2783" Stretch="Fill"
Fill="Black" Opacity="0.4"/>
<Ellipse Width="21.835" Height="21.862"
Canvas.Left="98.165"
Canvas.Top="54.414" Stretch="Fill"
Fill="Black" Opacity="0.3"/>
<Ellipse Width="21.835" Height="21.862"
Canvas.Left="92.9838"
Canvas.Top="26.9938" Stretch="Fill"
Fill="Black" Opacity="0.2"/>
<Ellipse Width="22" Height="22"
Canvas.Left="71" Stretch="Fill"
Fill="Black" Opacity="0.1" Canvas.Top="7"/>
<Canvas.RenderTransform>
<RotateTransform x:Name="SpinnerRotate"
Angle="0" />
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="ContentControl.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName
="SpinnerRotate"
Storyboard.TargetProperty
="(RotateTransform.Angle)"
From="0" To="360"
Duration="0:0:1"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</Grid>
<TextBlock Foreground="White" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Panora Supermarket" VerticalAlignment="Top" Width="375" Height="50"/>
</Grid>
</ScrollViewer>
</Grid>
Add bellow code to constructor of splash.xaml.cs class
try
{
Task.Delay(2000).ContinueWith(_ =>
{
var frame = NavigationHelper.FindFrame(null, this);
frame.Source = new Uri("../Pages/Login.xaml", UriKind.Relative);
});
}catch(Exception ee){
}
Add this code to splash page and in there you can navigate to another page

How do you set a Translate Transform to an ImageBrush within a Path?

I have the following simple path. But everytime in Expression Blend I try and set a translate transform to its image brush the image disappears. Ideally the fill should be none. I need to dynamicly set the x and y of the image within the brush if possible. If you have done this in C# that would be fine as well. Or am I mistaken and this just cant be done?
<Path Data="M0.5,0.5 L99.5,0.5 L99.5,439.5 L0.5,439.5 z" Fill="#BFF31313" Height="440" Canvas.Left="192" Stretch="Fill" Stroke="Black" Canvas.Top="176" Width="100" Visibility="Collapsed">
<Path.Fill>
<ImageBrush ImageSource="4x4.png" Stretch="None"/>
</Path.Fill>
</Path>

Something like this?
<Path Data="M0.5,0.5 L99.5,0.5 L99.5,439.5 L0.5,439.5 z" Fill="#BFF31313" Height="440" Canvas.Left="192" Stretch="Fill" Stroke="Black" Canvas.Top="176" Width="100" Visibility="Collapsed">
<Path.Fill>
<ImageBrush ImageSource="4x4.png" Stretch="None">
<ImageBrush.Transform>
<TranslateTransform X="10" Y="10"/>
</ImageBrush.Transform>
</ImageBrush>
</Path.Fill>
</Path>

Categories