I want to resize width and height of inkcanvas to fit the screen. When I resized it, the width expands to the right and height expands to the bottom. But inkcanvas is not fit to screen.
I also want to fix the position of inkcanvas child element. If I can resize inkcanvas to fit the screen, the position of inkcanvas child element will not change.
How do I resize inkcanvas to the left and top to fit the screen?
<Canvas x:Name="Screen" >
<InkCanvas Name="inkcanvas" ResizeEnabled="True"
Width="{Binding ElementName=LayoutRoot, Path=ActualWidth}"
Height="{Binding ElementName=LayoutRoot, Path=ActualHeight}"
EditingMode="Select" ClipToBounds="False"
Background="Bisque"
SelectionChanging="OnSelectionChanging"
Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<!-- InkCanvas' Child Elements -->
</InkCanvas>
<Canvas.RenderTransform>
<MatrixTransform/>
</Canvas.RenderTransform>
</Canvas>
Thanks
Update:
I put inkcanvas in a grid. It fit to the screen but the position of child element is changed.
I want to fix the red rectangle position.
The position of red rectangle should not be changed.
<Grid>
<InkCanvas x:Name="inkcanvas" Background="Transparent">
<Rectangle Height="41" HorizontalAlignment="Left" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="69" Fill="#FFDB1111" />
</InkCanvas>
</Grid>
My big picure:
My WPF Application contain many pictures. I can zoom in/out the canvas. I can select the pictures by using selection tool.
I have canvas and inkcanvas.
canvas: contain picture and zoom in/out
inkcanvas: has selection tool
If I zoom out, the canvas and inkcanvas become smaller.
If I use selection tool, I copy all pictures from canvas to inkcanvas.
But the inkcanvas is zoom out, I cannot use selection tool if outside the inkcanvas boundary.
It is the reason why I want to resize inkcanvas and fix the children position.
<Window x:Class="WpfInkCavasSaveImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="1091" Width="873" WindowState="Maximized">
<Grid Margin="0,0,0,10" >
<Grid.RowDefinitions>
<RowDefinition Height="1200*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<InkCanvas HorizontalAlignment="Stretch" Margin="1,1,1,10" x:Name="inkCanvas1" VerticalAlignment="Stretch" Width="Auto" RenderTransformOrigin="0.5,0.5" Background="LightGreen" SnapsToDevicePixels="True" IsManipulationEnabled ="True" Grid.RowSpan="2">
<InkCanvas.CacheMode>
<BitmapCache/>
</InkCanvas.CacheMode>
<InkCanvas.DefaultDrawingAttributes>
<DrawingAttributes Color="Black" FitToCurve="True" Height="2.0031496062992127" IgnorePressure="False" IsHighlighter="False" StylusTip="Ellipse" StylusTipTransform="Identity" Width="2.0031496062992127"/>
</InkCanvas.DefaultDrawingAttributes>
</InkCanvas>
</Grid>
</Window>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
inkCanvas1.Width = System.Windows.SystemParameters.WorkArea.Width;
inkCanvas1.Height = System.Windows.SystemParameters.WorkArea.Height;
}
}
This depends on the container around the InkCanvas. Further you cannot expect the child-elements not to move if you mess with their container. If you need the child elements to behave independently of the InkCanvas you might want to rethink if that is a good idea and if what you want to accomplish can not be done more efficiently using another setup.
You should tell us more about what the big picture is of what you want to achieve, the fact that children are affected by manipulations of their container is expected and generally wanted. Maybe there is a better approach than to try and scale the container and at the same time having to shift all children around to nullify such a manipulation.
Remove all the margins from the inkcanvas and put it in a Grid.
Could you explain why this would not work for you?
<Grid>
<InkCanvas>
...
</InkCanvas>
</Grid>
Edit There are two way to keep the child element where it is:
As soon as the position or the size of the InkCanvas changes adjust the child positions accordingly. this means that you have to pick a fixed position (window topleft, screen topleft, ...) that determines the actual position of the child.
Remove the child from the InkCanvas and put it in the correct container (the one that determines the child's position.
I would prefer #2 as is is more logical and requires less calculations/event-handling
Related
I have a MediaElement in a Grid , and i want it to take the entire space when i play it.
here is my code:
<Grid Grid.Row="2" Grid.ColumnSpan="2">
<Grid.Background>
<ImageBrush ImageSource="Resource/bgrdMedia.png" Stretch="None"/>
</Grid.Background>
<MediaElement x:Name="VideoControl" LoadedBehavior="Manual" UnloadedBehavior="Stop"
Stretch="Uniform" StretchDirection="DownOnly" MediaEnded="Element_MediaEnded"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
but i have that:
any ideas! thanks !
By setting the StretchDirection to DownOnly you are preventing it from scaling upwards:
DownOnly | The content scales downward only when it is larger than the parent. If the content is smaller, no scaling upward is performed.
Source
If you leave the StretchDirection as Both (the default) and have the horizontal and vertical alignments as Stretch (which you have) it should give the result you want.
Note, however, that upscaling may result in a blurred or pixelated image if the original media isn't of sufficiently high resolution.
I use a Path element(StrokeThickness="1" SnapsToDevicePixels="True")
in Grid. I want to resize the window, the Grid element is wrapped by a Viewbox element.
Problem
When I resize the window, the Path will disappear some time. If I turn SnapsToDevicePixels to false, the Path element may blur which is not what I want.
How to avoid a single pixel line dispear?
the XAML code:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="207" Width="475">
<Viewbox Stretch="Fill">
<Grid Height="320" Width="517">
<Path Data="M0,0 H1 z" StrokeThickness="1" Stroke="Black" Margin="72,73,79,218" Stretch="Fill" SnapsToDevicePixels="True" MinHeight="1"/>
</Grid>
</Viewbox>
Pity for I have no reputation to post the runtime effect.
I have experimented the same problem with separators put in a Viewbox. Some of these disappear for some resolutions. To fix it, I replace them with border with 1 pixel height :
< Border Background="DarkGray" Grid.Row="0" Grid.ColumnSpan="7" Height="1" />
This avoid single line of one pixel to disappear in viewBox.
Hope it could be useful for you too.
I have a ScatterView that contains an image over which I should be able to draw.
<s:ScatterView HorizontalAlignment="Center" Margin="0,0,0,0" Name="desk" VerticalAlignment="Center">
<s:ScatterViewItem Width="200" Height="200">
<Grid>
<Image Name="img1" Source="/Resources/Desert.jpg"/>
<Viewbox>
<s:SurfaceInkCanvas Name="cvs1"/>
</Viewbox>
</Grid>
</s:ScatterViewItem>
</s:ScatterView>
I noticed that whenever I draw an ink trail towards the border of the image, the strokes on the ink canvas are scaled down to make room for more stuff. I do not want these strokes to be zoomed out. How can I change this behavior?
Here is a video that shows what's going on.
I figured it out. This behavior is caused by the fact that I hadn't defined a Width and Height on the SurfaceInkCanvas. This should do the trick:
<s:SurfaceInkCanvas Name="cvs1" Width="200" Height="200" />
I am creating a drawing metro application for Window 8 using c#. I am Using textblock inside the canvas and Ink-manager for drawing.This work fine but i want to draw a ink only upon the drowntext of textblock not in hole canvas.
Here is code:-
<Canvas Name="canvas" Background="Transparent" >
<TextBlock x:Name="txtblock" Margin="80,0,0,0" Foreground="White"
VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="60"/> </Canvas>
Please help me how to achieve this functionality.
I would think that the most straightforward way is to wrap your TextBlock within another Canvas.
As such, you will have two Canvas, with the child Canvas being positioned within the main Canvas.
One area of concern with this approach would be the sizing of the child Canvas, in which needs to be dynamically resized based on the size of the containing TextBlock.
<Canvas Name="canvas" Background="Transparent" >
<Canvas Name="childCanvas" Background="Transparent">
<TextBlock x:Name="txtblock" Margin="80,0,0,0" Foreground="White" FontSize="60"/>
</Canvas>
</Canvas>
Is there a way to zoom a viewbox content, excpet for one control?
I have a viewbox with a grid, and in this grid I have some controls and I'm trying to zoom all the controls in the viewbox except one, is it possible?
Many thanks,
Paulo
You can use a grid to add layers to your layout. That way, you can zoom one set of items, and leave another set un-zoomed.
<Grid>
<Viewbox>
<!-- Controls to zoom -->
</Viewbox>
<!-- Control to exclude from zoom -->
</Grid>
The order of the view box and the other controls in XAML will depend upon which layer appears on top.
If that doesn't quite do what you want, leave a comment and I'll revisit the answer.
EDIT You want the unzoomed control to be positioned relative to the (0,0) of the Viewbox. That will happen in this situation because both children of the grid are in cell (0,0) which means that their top-left corners are aligned. Can you give an example of what you have in XAML, and what's wrong with it (perhaps edit your original question)?
Here's some XAML to try:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Background="Green">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Viewbox>
<Rectangle Fill="Yellow" Width="10" Height="10" />
</Viewbox>
<TextBlock>I am positioned at (0,0)</TextBlock>
<TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
</Grid>
</Page>
That gives a layout like this:
http://img20.imageshack.us/img20/2045/layout1m.png
But note that when the height is reduced, the grid becomes wider than the view box, and so the content is layed out like this:
http://img20.imageshack.us/img20/9397/layout2i.png
I guess that's not what you want. In that case, you use a canvas and go for something like this:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Background="Green">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Viewbox>
<Rectangle Fill="Yellow" Width="10" Height="10" />
</Viewbox>
<Canvas>
<TextBlock>I am positioned at (0,0)</TextBlock>
<TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
</Canvas>
</Grid>
</Page>
Which looks like this:
http://img20.imageshack.us/img20/6743/layout3i.png