I am unable to set the size of border control relative to screen resolution.
I want to specify width of Border to 80% of the screen resolution [width wise only]. But I am unable to do so.
The easiest way would be to put your border in a Grid:
<Grid x:Name="LayoutRoot"
Background="White">
<Grid.ColumnDefinitions>
<!--80% column-->
<ColumnDefinition Width="8*"></ColumnDefinition>
<!--20% column-->
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
Background="Red"></Border>
<Border Grid.Column="1"
Background="Yellow"></Border>
</Grid>
EDIT:
Sorry, I just realised I did not read your question properly. You are talking about screen resolution. My example sets the first column of the grid to 80% of the browser window size. If it is screen resolution you want I think you will have to use javascript to get the values and then use code to set your object to the correct size:
var width= HtmlPage.Window.Eval("screen.availWidth");
var height= HtmlPage.Window.Eval("screen.availHeight");
Related
Im relatively new to WPF so I'm sorry in advance if there is a simple solution to this. However, I am trying to bind the height of a StackPanel to its containing Grid. I understand that a StackPanel automatically resizes to fit its elements but I would like to bind it to the Grid so that it does not do this. Right now the stack panel does not resize with the window since it remains the
size it needs to be in order to fit its elements.
Here is what I have so far:
<Grid x:Name="MainGrid" Grid.Row="2" Margin="1" Drop="Grid_Drop"
AllowDrop="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="175"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="SidePanel" Grid.Column="0" Height="{Binding
ActualHeight, ElementName=MainGrid, Mode=OneWay}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<local:DeviceTreeView x:Name="deviceTree" PyngInfo="{Binding
PyngSystemVm.PyngInfo}" Grid.Row="0"/>
</StackPanel>
<-- There is more code here but it is not important for answering this
question -->
</Grid>
I tried binding the height of "SidePanel" to the actual height of "MainGrid" but when I run this code and inspect the elements the Grid resizes with the window but the StackPanel does not. The StackPanel and the Grid even have different heights which doesn't make sense to me as their heights should be bound together.
I have also tried wrapping the entire StackPanel in a border and binding to that but that also did not work.
You don't need to bind the height of the StackPanel, simply setting its VerticalAlignment to Stretch will do it. However... You are still not going to get what I think you want. The StackPanel only stacks its child controls, it does not adjust them (at least not in the "stack" direction). Look into using a different control like Grid or UniformGrid or just expand your existing grid to have rows as well as columns.
I have an image control inside a grid displaying a 16x16 icon. But for some reason even though I set the properties so it would remain 16x16 it looks stretched.
Code :
<UserControl x:Class="ChatControls.UserListItem"
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="28" d:DesignWidth="132">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" MinWidth="24" MaxWidth="24" />
<ColumnDefinition Width="171*" />
</Grid.ColumnDefinitions>
<Image Name="imgIcon" Source="/ChatControls;component/Images/NormalUser.png" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None" />
<Label Content="Muhammad[A]" Grid.Column="1" Name="lblNick" VerticalContentAlignment="Center" Padding="8,5,5,5" />
</Grid>
</UserControl>
Is there any reason for this?
UPDATE 1:
Yes at runtime also :(
Many thanks in advance.
Actually, I've seen that regularly with PNG images. It seems that the default resolution for PNG is 72dpi, while the default screen resolution in WPF is 96dpi. WPF tries to take this into account by rendering png bitmaps scaled to 133% of their pixel size, which is technically correct but normally not what the user wants. You can either use a gif or jpg instead, or you can combine the image with a LayoutTransform scaling it to 0.75 of its size, or just stick with setting the size of the image control explicitly.
I find I often have to explicitly specify the Width and Height of Image controls to get them to appear correctly:
<Image
Name="imgIcon"
Source="/ChatControls;component/Images/NormalUser.png"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Width="16"
Height="16"
/>
First of all, your XAML definition of your 171* is a bit odd. Your best approach is to do this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
You need to look into XAML layout passes in order to understand what this is doing.
Secondly, because you're using a dynamic image source (loaded as a URI), it will be streamed so the width during the first layout pass will be 24, but after the image has been streamed, the control will resize dynamically. If you want to enforce sizing, your best bet is to use a border around the image as a 0 width container. Like this
<Border Grid.Column="0" Grid.Row="0" BorderThickness="0" BorderBrush="Black">
<!-- UniformToFill: Scale to completely fill output area.
Aspect ratio is preserved. Cropping may occur.-->
<Image
Source="sampleImages/gecko.jpg"
Stretch="UniformToFill" />
</Border>
Enforcing a width and a height around an image is a shorthanded way of doing this. The other thing you may want to do is to explicitly define the way the source image is loaded like this:
<Image Width="200">
<Image.Source>
<BitmapImage DecodePixelWidth="200"
UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
</Image.Source>
</Image>
Which will not load the full image but will resize before load as opposed to dynamically. For further reference review http://msdn.microsoft.com/en-us/library/ms748873.aspx
I agree with the accepted answer, but I don't think it explains why, it just explains that it works.
It happens because of the image pixels that is dependent on the screen resolution, it should be device independent so that to remains same on any screen resolution
So use this to do so.
<Image Width = "24" Height = "24" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased" Stretch = "None"/>
replace Width and Height with the original size of the image
This'll help you
Basically I'm getting some data from a service and displaying the results in a listbox. The template for the items is using a grid. NOTE: If there is a better way let me know.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0"/>
<TextBlock Grid.Column="1"/>
</Grid>
The problem is, that sometimes an image is not returned. In that case the column for the image should collapse and the text column should take up the full width.
I've tried a couple of different ways already with no luck. How can I collapse this column when no image is returned?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0"/>
<TextBlock Grid.Column="1"/>
</Grid>
Setting the image column width to auto will resize the column width according to the image size. If there is no image the size will be set to 0. The text column is set to *, this way it always takes all the available space.
Note: If your images are big, you may need to set MaxWidth as well.
You can use Expander control and set IsExpanded property.
All,
I'm trying to make the silverlight app I'm making resize in a reasonable manner. To do this, I thought I would use a dynamic grid. In the center of the grid I need to put an image inside of a canvas because I will dynamically be positioning objects on top of it. Ideally, as the user makes the browser window larger, the center column would be able to resize and grow larger, thereby growing the image.
Here's what I've got:
<Viewbox Grid.Row="0" Grid.Column="1">
<Canvas x:Name="cvsCenterPane">
<Image x:Name="imgFormImage" MouseLeftButtonDown="imgFormImage_MouseLeftButtonDown"
MouseLeftButtonUp="imgFormImage_MouseLeftButtonUp" MouseMove="imgFormImage_MouseMove" />
</Canvas>
</Viewbox>
In the code behind, I then set the image source.
Here's my grid definition:
<Grid x:Name="LayoutRoot" Background="DarkCyan" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
I think there must be some sort of unhandled exception occurring during the construction of the Viewbox because the image does not display at all. What am I doing wrong here? Am I taking the wrong approach?
There is no exception, the canvas just does not have any set dimensions which is a requirement when you want to use a ViewBox.
I for one would not use a canvas, you can stick with the grid since you can place more than one control in a cell and if you need to move the objects around you can use the Margin or a TranslateTransform in the RenderTransform property.
This does not work because you cannot set the x:Name attribute of children in a Viewbox with silverlight. At least according to a few sources:
http://blog.ningzhang.org/2008/11/viewbox-control-in-silverlight-toolkit.html
http://forums.silverlight.net/forums/p/48535/128830.aspx
http://forums.silverlight.net/forums/p/45789/123941.aspx#123941
this seems to be by design. A few workarounds have been suggested, so I will try them.
Edit: HB seems to be correct, there is no exception, the Canvas needed to have dimensions set.
In WPF, I want set a controls width to be, say, 97% of it's Parent controls ActualWidth property. How can I do this?
You can use Grid panel. E.g:
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.97*"/>
<ColumnDefinition Width="0.03*"/>
</Grid.ColumnDefinitions>
<Button Content="97%"/>
<Border Grid.Column="1" Background="Green">
</Border>
</Grid>
</Border>
Grid will occupy 100% of available border's size. First column will use 97% of it. And the rest 3% are given to border in the second column.
Hope this helps.
Cheers, Anvaka