I've got an image with 400 * 400 pixels. Now, when I add it to the WPF page:
<Image Source="Resources\about.png" Stretch="None"/>
its size become larger:
Any idea why this behavior happens?
Specify the width and height explicitly:
<Image Source="Resources\about.png" Width="400" Height="400" />
(Also, in your screenshot, it looks like HorizontalAlignment and VerticalAlignment are set to Stretch?)
Related
I have images of 600px width and 600px height. we have three sizes of circles. all have the center in the middle. Some have reflection as shadow beneath it. I would like to crop the image for display purposes.
So the largest circle as shown above has a diameter of about 500 pixels, but the medium and small ones have less. I know in the code which size I have of object type Product. Because of the size differences I have to place them differently and used three placeholder images for it, like this:
<Image x:Name="imgCoinHolderSmall"
HorizontalAlignment="Center"
Margin="0,495,0,0"
VerticalAlignment="Top"
Stretch="Fill"
Width="200"
Height="200"/>
<Image x:Name="imgCoinHolderMedium"
HorizontalAlignment="Center"
Margin="0,510,0,0"
VerticalAlignment="Top"
Stretch="Fill"
Width="200"
Height="200"/>
<Image x:Name="imgCoinHolderLarge"
HorizontalAlignment="Center"
Margin="0,520,0,0"
VerticalAlignment="Top"
Stretch="Fill"
Width="200"
Height="200"/>
So can I change the properties of the image such that it does not display the red part of this screenshot:
By the way, I do not display the images on their original size (as you can see at the xaml code) I set the width to 200. It is just a display thing, I do not have to store the new image. I would like to do it on the fly, preferably by setting image properties in the xaml. (for all three sizes of circles)
Is using the CroppedBitmap the best approach? http://msdn.microsoft.com/en-us/library/ms752345.aspx it is for windows rt by the way.
One option would be to use a clipping mask:
<Image Source="MyImage.jpg">
<Image.Clip>
<RectangleGeometry Rect="10,10,80,80"></RectangleGeometry>
</Image.Clip>
</Image>
The rect structure takes X,Y, Width and Height values that you have to set depending on your image.
I have a grid that contains an image.
<Grid Name="grid1">
<Image Name="image1" Stretch="None" Source="C:\Users\User\Desktop\image.jpg"/>
</Grid>
If the size of image was greater than the size of the grid, I want to scale it manually by render transform to fit the grid. I don't want to use Stretch="Fill" because I need the scale factor.
Is there any way to detect the situation that an UIElement goes out of view?
I need your help.
You could simply set the Stretch property to Uniform (or perhaps Fill) and calculate the scaling factor from the ActualWidth of the Image and the Width of the ImageSource, whenever you need it. The sample below does the calculation in a SizeChanged handler, but it could be anywhere else.
<Image Name="image1" Stretch="Uniform" Source="C:\Users\User\Desktop\image.jpg"
SizeChanged="ImageSizeChanged"/>
The calculation looks like this:
private void ImageSizeChanged(object sender, SizeChangedEventArgs e)
{
var scale = image1.ActualWidth / image1.Source.Width;
}
As Uniform is the default value of the Stretch property, you wouldn't have to set it at all.
I'm not sure why you would want to rescale your image manually when WPF can do it for you...
Instead of putting the image straight into the grid, use a Viewbox control:
<Grid Name="grid1">
<Viewbox>
<Image Name="image1" Stretch="None" Source="C:\Users\User\Desktop\image.jpg"/>
</Viewbox>
</Grid>
The Viewbox will automatically scale the picture to fit inside the grid...
I have two controls in a StackPanel; one is a RadChart and the other one is RadPanelBar. It shows 100% width for RadChart but it is not showing 100% width for the RadPanelBar.
I am using the following code. Can someone tell what could be the issue, why it does not show 100% width for RadPanelBar
<StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">
<telerikChart:RadChart x:Name="radChart" Margin="8">
<telerikChart:RadChart.SeriesMappings>
<telerik:SeriesMapping LegendLabel="Results">
<telerik:SeriesMapping.ItemMappings>
<telerik:ItemMapping FieldName="Score" DataPointMember="YValue"/>
</telerik:SeriesMapping.ItemMappings>
</telerik:SeriesMapping>
</telerikChart:RadChart.SeriesMappings>
</telerikChart:RadChart>-->
<telerik:RadPanelBar x:Name="radPanelBar"
HorizontalAlignment="Center" VerticalAlignment="Top"
ItemTemplate="{StaticResource PanelBarHeaderTemplate}">
</telerik:RadPanelBar>
</StackPanel>
Change from HorizontalAlignment and VerticalAlignment to Stretch might work; please try.
I'm using Silverlight 4 and I want to create a childwindow with a TextBox, that the TextBox's width will be constant and it's height will be resized according to the size of the assigned text.
Any ideas how can I do it?
Set the Width property on your textbox to whatever you want it to stay at -- then set the TextWrapping property to "Wrap", and then make sure the content control holding is not set up to stretch it vertically and it will do what you want (text wraps and the box grows vertically to contain it as you enter stuff).
Ultra simple example:
<Grid x:Name="LayoutRoot" VerticalAlignment="Top">
<TextBox Name="tbTest" TextWrapping="Wrap" Width="300" />
</Grid>
So I'm coming at WPF from a HTML perspective.
I just want to put a TextBox on my Window like this:
<Grid>
<TextBox Name="theName" />
</Grid>
Turns out that the TextBox is then HUGE, covers the whole window. (!)
Ok, that's not what I want, but I don't want to define the EXACT size either since I know Height and Width should be flexible, so I try:
<TextBox Name="theName" Width="Auto" Height="Auto"/>
Same thing. So I try:
<TextBox Name="theName"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
Same thing. So I just hard code the sizes:
<TextBox Name="theName" Width="100" Height="20"/>
Which I know is not a good programming practice in WPF.
So, what how do you tell TextBox to "display default sizes for the font size being used"?
You can take Bryan's example even a bit further. By specifying a specific alignment that isn't stretch and further constrain the TextBox so that it won't expand beyond a certain size. eg:
<Grid x:Name="LayoutRoot">
<TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Text="TextBox" TextWrapping="Wrap"
MinWidth="15" MinHeight="20" MaxWidth="500" MaxHeight="50"/>
</Grid>
You can take it even further by setting up rows/columns inside the Grid and constraining them in various fashions. As you're coming from an HTML background, think of it like using a table to control layout. Remember that you can also nest other container objects (i.e. StackPanels, WrapPanels, other Grids, etc...).
The challenge with XAML and the WPF/Silverlight controls is that they a very flexible, so you've got to get a handle on all the options and how they affect layout.
Good luck. I'm going through this exact same thing now.
Use a different container.
The Grid always streches its child controls to fill the grid cell.
You could use e.g. a stackpanel which only streches its controls in one direction.
In addition to using a different panel as Stefan mentioned you could just give the TextBox an alignment that isn't Stretch. e.g.
<TextBox Name="theName" HorizontalAlignment="Left" VerticalAlignment="Top"/>
The sizes in WPF aren't pixels, they are "device independent pixels" that are 1/96 of an inch - so in today's normal DPI setup they map 1:1 to pixels.
But, if you run the program in high DPI mode the TextBox will grow with the DPI (and the font).
So setting an hard-coded size isn't that bad.
Other than that you can only use HorizontalAlignment and VerticalAlignment that are not "Stretch", this will size the TextBox to content - but then an empty TextBox will be tiny.
You can set VerticalAlignment to "Center", "Top" or "Bottom" to get automatic height of about one line (maybe backed up by a MinHeight setting to avoid problems really tiny fonts) and then set the Width so the TextBox width does not change as the user types into it.