<Image Width="640" Height="480" Name="ImageControl" Grid.Column="0" Grid.Row="1" />
<Canvas Width="620" Height="480" Name="myCanvas" Grid.Column="0" Grid.Row="1" >
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="10" Name="Circle1" Canvas.ZIndex="99" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="30" Name="Circle2" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="50" Name="Circle3" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="70" Name="Circle4" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="90" Name="Circle5" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="110" Name="Circle6" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="130" Name="Circle7" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="150" Name="Circle8" />
</Canvas>
I have an Image and a Canvas in the same cell in a Grid. The idea is to place the 8 red ellipses over the image. The Image currently has no source as the Kinect is used to supply the image. When it first loads the red ellipses can be seen for a split second until the image loads and then they aren't seen again.
I have tried changed the order of the elements, the ZIndex of the Canvas, the ZIndex of the Grid all with no avail.
this.ImageControl.Source = BitmapSource.Create(
imageFrame.Width,
imageFrame.Height,
96,
96,
PixelFormats.Bgr32,
null,
this.pixelData,
stride);
This is how the Kinect stream image is assigned to the Image source.
Have you tried to use a different imagesource?
It works for me.
Try to use one of the Example Pictures from Windows.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="537" Width="721">
<Grid>
<Image Width="640" Height="480" Name="ImageControl" Grid.Column="0" Grid.Row="1" Source="Desert.jpg" />
<Canvas Width="620" Height="480" Name="myCanvas" Grid.Column="0" Grid.Row="1" >
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="10" Name="Circle1" Canvas.ZIndex="99" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="30" Name="Circle2" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="50" Name="Circle3" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="70" Name="Circle4" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="90" Name="Circle5" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="110" Name="Circle6" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="130" Name="Circle7" />
<Ellipse Width="10" Height="10" Fill="Red" Canvas.Left="610" Canvas.Top="150" Name="Circle8" />
</Canvas>
</Grid>
</Window>
Turns out I head this in my code
myCanvas.Children.Clear();
This was clearing the line skeleton drawn on the canvas once it was no longer needed and this was removing the ellipses as well.
Related
I'm trying to do a Rotate/Translate/Scale of objects using a canvas for the actual figure and I use a Grid for "thumbs" container (Thumbs are some small ellipses)
I have some trouble understanding the logic behind this example.
<Window x:Class="RotateMe.MainWindow"
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:local="clr-namespace:RotateMe"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="AddRectangle" Width="50" Grid.Row="0" HorizontalAlignment="Left" Click="AddRectangle_Click"/>
<Canvas x:Name="DrawingCanvas" Grid.Row="1" Background="Gray">
<Ellipse x:Name="Thumb3" Fill="Azure" Height="10" Width="10" >
<Ellipse.RenderTransform>
<TranslateTransform X="-50" Y="-50"/>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse x:Name="Thumb4" Fill="Beige" Height="10" Width="10" >
<Ellipse.RenderTransform>
<TranslateTransform X="50" Y="50"/>
</Ellipse.RenderTransform>
</Ellipse>
</Canvas>
<Grid x:Name="ThumbsParent" Grid.Row="1" RenderTransformOrigin="1,1">
<Ellipse x:Name="Thumb" Fill="Red" Height="10" Width="10" RenderTransformOrigin="1,1">
<Ellipse.RenderTransform>
<TranslateTransform X="-50" Y="-50"/>
</Ellipse.RenderTransform>
</Ellipse>
<Ellipse x:Name="Thumb2" Height="10" Width="10" Fill="Green">
<Ellipse.RenderTransform>
<TranslateTransform X="50" Y="50"/>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</Grid>
</Window>
So here I have
A Grid over an Canvas (same size)
Each of them contain a 10/10 ellipse that one is render transform -50/-50 and one is 50/50.
I would have expected the same behavior (overlap of the ellipses on both -50/-50 and 50/50)
Instead it looks like this.
So from what I understand from this.
Grid renders from CenterX/CenterY
Canvas renders from 0/0.
Is there a particular reason this is happening?
Why I am asking this, because I wanted to use a TranslateTransform for all my object and if one moves, all should move, but because one translate from 0/0 and one from CenterX/CenterY the same translate won't work on these elements.
I have in resource dictionary Buttons.xml two vector drawings for to be shown as a button content.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox
x:Key="BlueMinusButton"
Height="20"
Stretch="Uniform">
<Canvas
Width="100"
Height="100">
<Canvas.LayoutTransform>
<ScaleTransform
ScaleX="1"
ScaleY="-1"
CenterX=".5"
CenterY=".5" />
</Canvas.LayoutTransform>
<Ellipse
Canvas.Left="0"
Canvas.Top="0"
Height="100"
Width="100"
Fill="Blue" />
<Line
X1="10"
X2="90"
Y1="50"
Y2="50"
Fill="Black"
StrokeThickness="10"
Stroke="Black" />
</Canvas>
</Viewbox>
<Viewbox
x:Key="GreenPlusButton"
Height="20"
Stretch="Uniform">
<Canvas
Width="100"
Height="100">
<Canvas.LayoutTransform>
<ScaleTransform
ScaleX="1"
ScaleY="-1"
CenterX=".5"
CenterY=".5" />
</Canvas.LayoutTransform>
<Ellipse
Canvas.Left="0"
Canvas.Top="0"
Height="100"
Width="100"
Fill="Green" />
<Line
X1="10"
X2="90"
Y1="50"
Y2="50"
Fill="Black"
StrokeThickness="10"
Stroke="Black" />
<Line
X1="50"
X2="50"
Y1="10"
Y2="90"
Fill="Black"
StrokeThickness="10"
Stroke="Black" />
</Canvas>
</Viewbox>
</ResourceDictionary>
In view1.xaml I have three buttons and other controls and I use from resources same content for two buttons.
<UserControl
x:Class="ApplicationName.View1"
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"
xmlns:local="clr-namespace:ApplicationName">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="Buttons.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="Auto" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Grid.Row="0"
Content="Object1" />
<Button
Grid.Column="1"
Grid.Row="0"
Content="{StaticResource BlueMinusButton}"
Command="{Binding DoCommand1}" />
<Label
Grid.Column="0"
Grid.Row="1"
Content="Object2" />
<Button
Grid.Column="1"
Grid.Row="1"
Content="{StaticResource GreenPlusButton}"
Command="{Binding DoCommand2}" />
<Label
Grid.Column="0"
Grid.Row="2"
Content="Object3" />
<Button
Grid.Column="1"
Grid.Row="2"
Content="{StaticResource GreenPlusButton}"
Command="{Binding DoCommand3}" />
</Grid>
</UserControl>
view1.xaml is used in view2.xaml.
<UserControl
x:Class="ApplicationName.View2"
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:local="ApplicationName">
<Grid>
<StackPanel>
<Label
Content="Controls" />
<local:View1
DataContext="{Binding View1Context}"/>
<Label
Content="Other controls" />
</StackPanel>
</Grid>
</UserControl>
Here comes the problem: When looking the view2.xaml in xaml editor, the content for the middle button is missing. Same happens in run time. If I look view1.xaml in xaml editor, all the button contents are visible. Here is a picture from the views:
Why the content is not shown and how do I get it back?
Set x:Shared="False" for your each ViewBoxif you want to useit in multiple places.
I'm using WPF's wrappanel. the problem is that in the right side of it there's an empty space that I would like to reduce and I don't know how.
in the pic below you can see the right against the left side margin, I would like them both to be like the left one.
This is my XAML:
<Grid x:Name="root">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="263*" />
<ColumnDefinition Width="240*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="LightBlue"/>
<WrapPanel >
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
</WrapPanel>
</Grid>
It looks like you forgot to center the WrapPanel in the Column. Like this:
<Grid x:Name="root">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="263*" />
<ColumnDefinition Width="240*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="LightBlue"/>
<WrapPanel HorizontalAlignment="Center">
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
</WrapPanel>
</Grid>
You're getting the big space at the end because it can only fit so many squares in the space you've assigned it. It can't quite fit the last square in to the first line so it wraps it. That chunk of space on the right is just the extra "dead" space.
The other thing you can do with a WrapPanel is specify how big the item is going to be. You'll see I've used the ItemHeight and ItemWidth properties, this gives me more control over how it is sized.
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="263*" />
<ColumnDefinition Width="280*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="LightBlue"/>
<WrapPanel ItemHeight="60" ItemWidth="60" >
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
</WrapPanel>
</Grid>
I have a UniformGrid object in my WPF project that has 2 rows and 3 cols and its width and height are set to auto (with both alignments set to Stretch).
This grid will hold 6 squares that I want to fill as much of their cell as possible and be centered horizontally and vertically.
What do I need to be added to allow for the squares to increase/decrease their length/width based on the dynamic size of the parent? I.E., when the window is resized.
Here is my xaml so far:
<UniformGrid Rows="2" Columns="3">
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100"/>
</UniformGrid>
Edit:
And the Rectangle objects need to remain square.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid>
<UniformGrid Rows="2" Columns="3">
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
<Viewbox Stretch="Uniform"><Rectangle Height="100" Width="100" Fill="#FFF4F4F5" Stroke="Black" /></Viewbox>
</UniformGrid>
</Grid>
</Page>
You could do this:
<UniformGrid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Width"
Value="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" />
</Style>
</UniformGrid.Resources>
Or you could bind the Height to the ActualWidth.
Unfortunately this will not keep them stretched to the maximum.
If you remove the height and width properties it will do just that.
I have a control containing a PathListBox from Blend SDK (see XAML below). The items inside are of identical width and various height. Currently, the midpoint of the items follow the arc's path (see the picture) i.e. they are clearly vertically arranged 'center'. However, I would like the items 'top' vertically aligned, so their top follows the arc's path. How can I do that?
<Grid x:Name="LayoutRoot">
<ec:PathListBox Margin="160,290,-30,-250">
<ec:PathListBox.LayoutPaths>
<ec:LayoutPath SourceElement="{Binding ElementName=arc}"
Padding="-25" FillBehavior="NoOverlap"
Distribution="Even" Span="0.5"/>
</ec:PathListBox.LayoutPaths>
<Rectangle Fill="#FFF4F4F5" Height="103" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="120" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="140" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="265" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="100" Width="100"/>
<Rectangle Fill="#FFF4F4F5" Height="265" Width="100"/>
</ec:PathListBox>
<ed:Arc x:Name="arc"
ArcThickness="10" ArcThicknessUnit="Pixel" Margin="160,290,-30,-250"
Stretch="None" Stroke="Transparent" StartAngle="-7"
RenderTransformOrigin="0.5,0.5" StrokeThickness="3"
Opacity="0.155" Fill="LightGray">
<ed:Arc.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
<SkewTransform AngleY="-17" AngleX="-16"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</ed:Arc.RenderTransform>
</ed:Arc>
</Grid>
Just change margins of your rects:
...
<Rectangle Fill="Green" Height="103" Width="100" Margin="0,130,0,0"/>
<Rectangle Fill="Green" Height="120" Width="100" Margin="0,120,0,0"/>
<Rectangle Fill="Green" Height="140" Width="100" Margin="0,140,0,0"/>
<Rectangle Fill="Green" Height="265" Width="100" Margin="0,265,0,0"/>
<Rectangle Fill="Green" Height="100" Width="100" Margin="0,100,0,0"/>
<Rectangle Fill="Green" Height="265" Width="100" Margin="0,265,0,0"/>
...
I'm after trying it myself on Blend4 and it works.