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>
Related
The I want to use the SkiaSharp Canvas in ScrollViewer, but not only in Main content, but in TopHeader and LeftHeader as well. The paint events are called, the skia is drawing, but the result does not displayed on the screen, just in a main content.
here is the example:
<ScrollViewer
HorizontalScrollBarVisibility="Visible"
HorizontalScrollMode="Enabled"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Enabled">
<ScrollViewer.TopHeader>
<Grid
Width="{Binding ElementName=Canvas, Path=ActualWidth}"
Height="30"
Background="LightGray">
<TextBlock Text="Hello" />
<skia:SKXamlCanvas
x:Name="TopHeaderCanvas"
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
PaintSurface="OnPaintTopHeader" />
</Grid>
</ScrollViewer.TopHeader>
<ScrollViewer.LeftHeader>
<skia:SKXamlCanvas
Width="60"
Height="{Binding ElementName=Canvas, Path=ActualHeight}"
Background="Gray"
PaintSurface="OnPaintLeftHeader" />
</ScrollViewer.LeftHeader>
<ScrollViewer.Content>
<skia:SKXamlCanvas
x:Name="Canvas"
Width="4000"
Height="3500"
Margin="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
PaintSurface="OnPaintMainContent" />
</ScrollViewer.Content>
</ScrollViewer>
As You can see, I tried the skia sharp canvas in wrapped in grid, directly under the ScrollViewer. Unfortunately it does not help.
Here is the result.
The left is totally empty, but is should be filled with HotPink, and the TopHeader just displays the Grid with "hello" , but it should be covered by canvas, and filled with Green color.
Anybody has an idea, why the skia is not working in ScrollView TopHeader and Left Header?
The SkiaSharp nuget which contains the canvas:
https://www.nuget.org/packages/SkiaSharp.Views/1.68.2-preview.21
And here are some SkiaSharp example:
https://github.com/mono/SkiaSharp/tree/master/samples/Basic/UWP/SkiaSharpSample
UWP ScrollViewer.TopHeader with SkiaSharp does not drawing
I could reproduce your issue, and I tried to re-draw canvas within PaintSurface but it also does not work, please feel free post this issue in SkiaSharp github, And I will report this to the team.
It was a bug In SkiaSharp.
It is fixed: https://github.com/mono/SkiaSharp/pull/1133
Thank you: mattleibow
I have a overlay control with a grid with few controls on it. On my WPF window I create an instance of this overlay as below
<overlays:OverlaySelector x:Name="Selector" Grid.Row="2" Grid.RowSpan="2" Grid.Column="3" Height="Auto"/>
My problem is that when I re-size my WPF window the overlay does not re-size. What could be the problem?
You shouldn't be manually resizing controls in WPF. Proper use of your control should do that for you. Try using the FrameworkElement.HorizontalAlignment, FrameworkElement.VerticalAlignment and FrameworkElement.Margin properties to automatically resize the control for you when the Window is resized. Try something like this:
<overlays:OverlaySelector x:Name="Selector" Grid.Row="2" Grid.RowSpan="2"
Grid.Column="3" Height="Auto" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="20" />
Of course, this won't work if you have hard coded any size or dimension values inside your OverlaySelector control.
Alright, so I have a XAML page with a TextBlock in a Windows Phone 8 application. My dilemma is this:
I pragmatically add more content (formatted lines with Inlines.Add(new Run...) to the TextBlock. The text block is currently filled from bottom to up because of the ScrollViewer in the sense that a line appears in the bottom after another. I would also be fine with them starting to appear from the top as long as the TextBlock would continue to scroll down (actually this might look better) once it is full. My TextBlock is inside a ScrollViewer as below:
<Popup x:Name="send_message_xaml" Grid.Row="1" VerticalOffset="0" Width="750" Height="auto">
<StackPanel Orientation="Vertical" Margin="0,0" Width="auto" Height="auto">
<ScrollViewer Height="345" HorizontalAlignment="Left" Margin="0,0,0,0" Name="scrollViewer1" VerticalAlignment="Bottom" Width="420" VerticalScrollBarVisibility="Auto">
<TextBlock x:Name="message_log" Margin="40,50,0,0" TextWrapping="Wrap" Width="420" VerticalAlignment="Top" FontSize="22"/>
</ScrollViewer>
<TextBox x:Name="message_to_send" InputScope="Chat" Width="480" KeyDown="message_to_send_KeyDown" Margin="15,0"/>
</StackPanel>
</Popup>
How can I get the textblock to scroll so that the newest appended message is always at the bottom? I found a bunch of these threads but none seem to solve my problem so far. Do I need to add some code somewhere with the appending?
You need to update the VerticalOffset based on the ScrollableHeight. When you add new inlines to the TextBlock, its height is going to change and that will notify the parent ScrollViewer. So, after you add new items to the inlines, run the Measure method and update the VerticalOffset.
Here is an example.
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
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