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;
Related
There is one Grid and I drop an Image control into the Grid.
What I do : just simply change both the property-HorizontalAlignment and VerticalAlignment to 'Center'.
However the image control performs strangely unlike other controls do. This Image control center itself according to its upper left corner like below :
I want to know why it performs in this way?
EDIT
Here is my XAML:
<UserControl x:Class="Entity.WPF.Controls.ShopProfile"
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="600" d:DesignWidth="780">
<Grid>
<DockPanel >
<Grid>
<Image HorizontalAlignment="Center" Height="100" Margin="0" VerticalAlignment="Center" Width="100"/>
</Grid>
</DockPanel>
</Grid>
And if I set margin like Margin="-50,-50,0,0",it is centered actually,but why other controls don't need this setting?
That's interesting, I'm not sure why that happens, or if it's documented somewhere.
To answer your question, how to center the image control inside a grid, just remove those properties and the image will be centered in the grid automatically.
<Grid>
<Image Height="100" Margin="0" Width="100" />
</Grid>
I'm trying to add a static image inside a RichTextBox based on the selection of a ListBox item. I'm able to achieve the functionality of loading the image but the image doesn't occupy the entire size of the RichTextBox. I looked at MSDN documentation for any property I could set but couldn't find any that suits my need.
I've posted a sample code snippet to add an image to a RichTextBox.
<Window x:Class="ImageDepth.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>
<RichTextBox HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="100" BorderBrush="Gray">
<FlowDocument>
<BlockUIContainer>
<Image Source="C:\Temp\Penguins.jpg"/>
</BlockUIContainer>
</FlowDocument>
</RichTextBox>
</Grid>
Am I missing something here or is there a simpler way to achieve this?
Edit: I tried setting the Height and Width of the Image to that of the RichTextBox but it covers about 80% of the RichTextBox. Also, I had to remove the Stretch property of the Image since it distorts the image slightly even though setting the property makes the image cover about 90% of the area.
You have to bind Height and Width of Image to ActualHeight and ActualWidth of RichTextBox.
<Image Source="C:\Temp\Penguins.jpg"
Width="{Binding ActualWidth, RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType=RichTextBox}}"
Height="{Binding ActualHeight, RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType=RichTextBox}}"/>
UPDATE
There seems internal padding of RichTextBox. You can set that to negative value to remove that padding.
<RichTexBox Padding="-5,-2,-5,-2"> // It reads Left, Top, Right, Bottom
....
</RichTexBox>
Change -5,-2,-5,-2 to desired value which seems fit for you.
Try this:
<Window x:Class="ImageDepth.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>
<RichTextBox HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="100" BorderBrush="Gray">
<FlowDocument>
<BlockUIContainer>
<Image Height="100" Width="100" Source="C:\Temp\Penguins.jpg" Stretch="Fill"/>
</BlockUIContainer>
</FlowDocument>
</RichTextBox>
</Grid>
This will tell your image to fill the entire RichTextBox.
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!
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>
Why don't my media elements fill the screen correctly when I use the UniformToFill stretch? The mediaElement clips at the bottom if the window is wider than the mediaElement, and it clips at the right if the window is taller than the mediaElement.
<Window x:Class="WpfApplication1.Window3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Preview Window" Height="200" Width="600" WindowStyle="None" Background="Black" ResizeMode="CanMinimize" MouseLeftButtonDown="Window3_MouseLeftButtonDown" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid Focusable="False">
<MediaElement Name="mediaElement2" LoadedBehavior="Manual" MediaOpened="mediaElement2_MediaOpened" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="289,-19,-11,-19" />
<MediaElement Name="mediaElement1" LoadedBehavior="Manual" MediaOpened="mediaElement1_MediaOpened" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-11,0,289,0"/>
</Grid>
In the program I use these commands to stretch it and use visual brushes to apply these videos to another window. The problem occurs in this window where the video/picture clip incorrectly
window3.mediaElement1.Stretch = Stretch.UniformToFill;
window3.mediaElement2.Stretch = Stretch.UniformToFill;
Try setting the Stretch property to Stretch.Uniform instead of Stretch.UniformToFill.
If you want to fill the whole screen without maintaining relative dimensions, also try Stretch.Fill to stop clipping.