We Keep Coding

WPF Cannot scroll an image inside a ScrollViewer

I try to display an image in my window :
<Window x:Class="Problem.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<StackPanel Orientation="Vertical">
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
<Image Source="cat.jpg" Stretch="Uniform">
<Image.LayoutTransform>
<RotateTransform Angle="90" />
</Image.LayoutTransform>
</Image>
</ScrollViewer>
</StackPanel>
</DockPanel>
</Window>
where cat.jpg is a 1920x1080 image.
Here is the result :
As you can see, the VerticalScrollbar is disabled although I can't see the full cat head. Moreover, HorisontalScrollBar is Invisible.
My question is : How to enable scrollbar in order to scroll over my image ?

Remove the StackPanel. It gives its content infinite space, so the ScrollViewer has the height of the image. If you need to stack something under the image, create a StackPanel inside the ScrollViewer:
<Window x:Class="Problem.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
<StackPanel>
<Image Source="cat.jpg" Stretch="Uniform">
<Image.LayoutTransform>
<RotateTransform Angle="90" />
</Image.LayoutTransform>
</Image>
</StackPanel>
</ScrollViewer>
</DockPanel>

I was having the same problem, but with a custom made Image class which I only rendered drawings on by using the DrawingContext in the protected override void OnRender(DrawingContext dc) function. I did not understood then, that I either needed to set the size of the image (set the Width and Height properties) or create a new image from the drawingContext and make it the Source of the image, in order to resize the actual image.
I got my answer from here: Get images from DrawingGroup and the way I solved it was by changing the properties every time I used the Render function of my image:
DrawingImage drawingImage = new DrawingImage(mBackingStore);
Width = drawingImage.Width;
Height = drawingImage.Height;

Adjust Canvas inside a Grid in WPF

I'm having trouble to adjust the Canvas inside the Grid in WPF. I want it to have a 10px margin from the Right and Top sides of the Grid. What am I doing wrong in the below code?
<Window x:Class="Layout2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="DrawingArea" Background="Black">
<Canvas x:Name="InformationLayer"
Background="White"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Right="10"
Top="10"
Width="200" Height="30" >
</Canvas>
</Grid>
</Window>

Right and Top are attached properties of the Canvas class that position an element within a parent Canvas object. I do not believe they have a semantic meaning when used in the Canvas tag itself (unless of course you are nested in a canvas).
Instead, use the margin property:
<Canvas x:Name="InformationLayer"
Background="White"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,10,10,0"
Width="200" Height="30" >
</Canvas>
Margins are formatted as "Left, Top, Right, Bottom" in case you need to modify!

Fixing size in xaml file

I'm newbie with Wpf application i have this interface
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Alg="clr-namespace:AS.Views.DeformableModel"
xmlns:Controls="clr-namespace:Assergs.Windows.Controls;assembly=Assergs.Windows" x:Class="AS.Window1"
Title="Window1"
>
<Grid Margin="0,0,2,0">
<Controls:RibbonPanel Header="Menu" HorizontalAlignment="Left" Margin="0,0,0,31.405" Width="213.388">
<TreeView Width="210.449" HorizontalAlignment="Left" Margin="0,0,0,-1.515"/>
</Controls:RibbonPanel>
<StatusBar Margin="0,472.595,0,0.972" VerticalAlignment="Bottom">
<Label Content="Pret" Height="41.433" Width="36.737"/>
</StatusBar>
<StackPanel Margin="213.388,0,0,31.405">
<Image Height="473.5" Source="image-interface2.jpg"/>
</StackPanel>
</Grid>
</Window>
i got as a result:
as you saw, there is many design error i need to know :
How can i display the image at the full stackpanel space ?
why the RibbonPanel controller disappeared?
How can i change my snippet to make all controller's size depending to the size of the window (image,treeview...)

I think you should to know about wpf's panels and layouts. The grid is an excellent panel and you can get almost any common layout. But for getting this you should works with columns and rows (not only with margins and vertical/horizontal orientations). The stack panel is not the best control for stretching an image: if the stackpanel's orientation is vertical the item'a height is the item's desired height, and if the orientation is horizontal, the item's width is the item's desired width, so, if you want to stretch the image you can group it inside a content control, or (if there is no more controls) do not group.
I suggest you to use a dockpanel, the dock panel alows you put the items in the locations top, right, bottom and left:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Alg="clr-namespace:AS.Views.DeformableModel"
xmlns:Controls="clr-namespace:Assergs.Windows.Controls;assembly=Assergs.Windows" x:Class="AS.Window1"
Title="Window1"
>
<DockPanel Margin="0,0,2,0">
<Controls:RibbonPanel DockPanel.Dock="Left" Header="Menu" Width="213.388">
<TreeView /> <!--The tree view will be vertican and horizontally stretch-->
</Controls:RibbonPanel>
<StatusBar DockPanel.Dock="Bottom" Height="41.433">
<Label Content="Pret" Width="36.737"/>
</StatusBar>
<Image Stretch="UniformToFill" Source="image-interface2.jpg"/> <!--The last item take all aviable space-->
</DockPanel>
</Window>
Hope this helps...

Read about Layout Containers.
http://www.codeproject.com/Articles/140613/WPF-Tutorial-Layout-Panels-Containers-Layout-Trans
In your case you may use dock panel as parent panel.
Use Grid or Border instead panels. (I have not tested this code)
<DockPanel Margin="0,0,2,0">
<Grid DockPanel.Dock="Bottom">
<Label Content="Pret" Height="41.433"/>
</Grid>
<Grid DockPanel.Dock="Left" Width="213">
<TreeView Width="210.449" HorizontalAlignment="Left"/>
</Grid>
<Grid>
<Image Source="image-interface2.jpg" Stretch="Fill"/>
</Grid>
</Grid>

How to create a hovered toolbar

How to create a hovered toolbar?
Clicking to expand the ToolBar will not shrink the Canvas.
Expander works for expanding, but the canvas will get shrinked.
<UserControl x:Class="smartgrid.studio.View.GraphicEditorView"
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:model="clr-namespace:smartgrid.studio.Model"
xmlns:studio="clr-namespace:smartgrid.studio"
xmlns:metro="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
mc:Ignorable="d"
d:DesignHeight="1000" d:DesignWidth="1000">
<DockPanel>
<Expander DockPanel.Dock="left" Header ="Toolbar" FontSize="18" ExpandDirection="Up">
<TreeView Name="GraphicEditorEntityTree" Background="Transparent" BorderBrush="Transparent" ItemsSource="{Binding GraphicEditorEntities}"/>
</Expander>
<Canvas/>
</DockPanel>
</UserControl>

You can overlay things by putting them in a Grid without rows or columns, the sizing of your toolbar is an independent matter (you can still use an expander for that).

http://msdn.microsoft.com/en-us/library/system.windows.controls.panel.zindex.aspx
Panel.ZIndex might be the solution.
<Grid x:Name="LayoutRoot">
<Grid x:Name="Toolbar" Panel.ZIndex="1000" Visibility="Collapsed">
</Grid>
<canvas />
</Grid>

How to anchor a wpf data grid which is inside a stack panel a fixed distance from the main window's four corners

I have the following wpf layout given to me by my employer. It makes use of multiple nested stack panels.
I'm trying to anchor a data grid which is inside a stack panel a fixed distance away from the main window's four corners. And whenever the grid contains data of which some of it is hidden because of the parent window's size, it is supposed to display scroll bars which must disappear if not needed.
I set the data grid's and the stack panel's width to Auto so that it fills the width and that makes the horizontal and vertical scroll bars behave as i want them to. BUT the grid doesn't have the required height.
But when i try to set the data grid's height property to auto both the horizontal and vertical scroll bars disappear resulting in hidden data.
I tried setting the data grids height property to a fixed size and updating it whenever the window is resized but the scroll bars are still hidden how can i fix this?
<UserControl x:Class="WpfApplication1.UserControl1"
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"
d:DesignHeight="441" d:DesignWidth="300">
<Grid>
<StackPanel Margin="0" Name="stackPanel1">
<ListBox Height="100" Name="listBox1" Width="253" />
<Button Content="Button" Height="23" Name="button1" Width="256" Click="button1_Click" />
<StackPanel Name="stackPanel2">
<StackPanel Height="34" Name="stackPanel3" Width="249" />
<DataGrid AutoGenerateColumns="False" Name="dataGrid1" Height="282" />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:WpfApplication1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="502" Width="525" StateChanged="Window_StateChanged">
<Grid Margin="0">
<my:UserControl1 x:Name="userControl11" Loaded="userControl11_Loaded" />
</Grid>
</Window>

I don't understand all this StackPanel inside StackPanel stuff. You should simply use Grid for your layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Height="100" Name="listBox1" Width="253" />
<Button Grid.Row="1" Content="Button" Height="23" Name="button1" Width="256" />
<StackPanel Grid.Row="2" Height="34" Name="stackPanel3" Width="249" />
<DataGrid Grid.Row="3" AutoGenerateColumns="False" Name="dataGrid1" />
</Grid>
And having an empty StackPanel stackPanel3 as spaceholder seems awkward. Thats what WPF elements have a Margin property for.

When you put items into a vertical StackPanel they like to pretend they have infinite vertical space. Switch over to specifying rows on your Grid, and place your DataGrid in one of those rows. When it's inside a Grid it knows how much space it has available and should show the scrollbars appropriately.