I'm developing an application using WPF by c#.
I have 2 frames next to each other. The above will not change and just updated(like Facebook toolbar).
The bottom frame will change by clicking on some buttons. (it is something like masterpage in ASP).
I don't want to set a height and width for window or for frames. The problem is when I make the window full screen there is a space between two frames.
However none of the vertical/horizontal alignment stretch does not work.
<window>
<Frame VerticalAlignment="Top" Background="Crimson" />
<Frame VerticalAlignment="Bottom" Background="Black"
/>
</Window>
I want to create something like the this site as you see. the notify section and the main page.
EDIT:
i can put them next to each other just by set the height, but when i make full the window the heights stay and the yellow space becomes appear, so i want to find a way to put them Exactly next to each other in every window size.
As Mitch noted in the comments, you could place the two frames in a grid instead, and let the grid size the items.
<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>
</Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>
Related
I've been trying to have one canvas with two layers. One layer scrolls horizontally, the second one is on top and scrolls vertically.
In the second layer (the one that scrolls vertically), I stacked a transparent grid (or panel) and a panel with information so that we can see the first layer that is under this one and if we scroll up, we have the information that appears on the screen.
That works like a charm except that if I scroll horizontally, the first layer (the one under) does not scroll at all. It's not a problem if the vertical scrolls does not scroll if we swipe the transparent grid.
This is my xaml
<Canvas x:Name="Canvas">
<local:MyPage x:Name="PageContainer"/> <!--This one scrolls horizontally -->
<ScrollViewer
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Hidden"
Height="{Binding ActualHeight, ElementName=UcRoot}">
<!--This one scrolls vertically and appears on top -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1">
</Grid>
</Grid>
</ScrollViewer>
</Canvas>
I tried many things on the transparent grid (setting width to 1, removing it and setting the information grid margin top to 1200 for example) but the grid captures the event and does not relay to my page.
Can I get some help?
Thanks!
You have to set the background to 'Transparent' to the grid in order to be able to tap on it and swipe.. and you maybe need these properties to play with:
ScrollViewer.VerticalScrollMode
ScrollViewer.HorizontalScrollMode
Although, this is my suggested solutions:
<ScrollViewer ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollMode="Disabled" >
<Grid >
<TextBlock Text="contnet" />
</Grid>
</ScrollViewer>
<ScrollViewer ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled" >
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" Background="Transparent" ></Grid>
<Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Canvas>
I am using a GridView to display some products.
When I set the DataTemplate I use Width and Height with static values and define some rows for the data I want to display.
<Grid Width="97" Height="180"">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
The first row is for a 80x80 image and the second for the price.So far, so good.
Then I face the problem that even if the data shown (with the name of the product) in the last row, with a TextBlock, is just one line, the GridViewItem takes the value defined from the height property.
Is there a way for the height to adjust on TextBlock's Text. I tried setting Height to Auto, not including at all for the Grid and the TextBlock but then the text is not appearing whole on the screen.
I have a feeling what you want is the text to wrap around. You can achieve this by setting the text to wrap, like in the code demonstrated below:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Red" />
<Grid Grid.Row="1" Background="Blue" />
<TextBlock Grid.Row="2" TextWrapping="Wrap" Text="This is some text which will not fall off the edge because it is set to wrap around, and will continue filling down until the end of the screen because the grid is set to auto" />
</Grid>
I have two elements inside a Grid, the first one has a dynamic height and the second has a fixed height. When the user resizes the window the first element is supposed to grow bigger until the scrollbar does not show. Here's the code:
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<ScrollViewer>
<!-- MORE STUFF HERE -->
</ScrollViewer>
</Grid>
<Button Grid.Row="1" Width="126" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
And when it's small looks like this:
When it's big it looks like this:
How can I attached the Button the bottom of the first element, or make the first element stop growing after the content is displayed?
Set the Grid's VerticalAlignment to Top instead of Stretch:
<Grid VerticalAlignment="Top">
...
</Grid>
I'm starting to learn how to program and I have a problem.
I am making an application in C # WPF.
I want to put a scrollbar on a grid and not activate it.
I searched and tried several things I found, but I have not gotten it right.
As the window is larger than the monitor, what I want is to put a scrollbar to access the bottom of the window.
The last thing I tried is this.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="921*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<ScrollBar Height="921" HorizontalAlignment="Left" Margin="761,0,0,0" Name="scrollBar1"
VerticalAlignment="Top" Width="12" Maximum="960" Minimum="1" SmallChange="1" />
</Grid>
With this comes the scrollbar, but the window does not move.
Thanks in advance and forgive for writing. I made it with google translator.
The content that you wish to scroll should be a child of a ScrollViewer.
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="921*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
For the purposes of layout, The child is assumed to have infinite avaliable width and height. This means that the child of a scrollviewer will never behave as it would with restricted space (unless you set maxwidth / maxheight).
So I'm pretty new to WPF and I'm having trouble with the layout of my Window. Currently I have a WPF application with a Grid defined as such:
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
In the very top row, spanning two columns, I have a Menu. In the second row I have some Labels in the first column and an Image and a WindowsFormsHost in the second, finally, in the third row I have a graphing control in the second column. By default, I set the size of the Image and WFH to 570 x 413. Now, I'd like for both the Image and WFH to expand when my Window is resized such that they maintain the same relative (to the Window) size. (I actually would like the same to happen to my graphing control as well, but I can probably figure that one out if I can get the others. I cannot for the life of me figure out what setting I need to turn on/off or what I might need to bind or whatever in order to make this happen. Any help is greatly appreciated!
Thanks!
Have you tried:
<RowDefinition Height="*" />
Make sure to assign your Grid.Row within your image or control, but do not sign the controls height/width properties. The control should autosize with expansion.
Update
Did a quick test to make sure this works.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Example"/>
<Image Grid.Row="1" Source="c:\Example.jpg"/>
<Label Grid.Row="2" Content="Example2"/>
</Grid>
The image expands with the application based on the image's proportions. It does expand, but it keeps it's dimensions along with the full image in view. If you were to change the rowdefinition from ***** to Auto, you will notice that the image will expand, but it will expand past your view. Meaning you will not always see the full image.
I would suggest making a simple application like above, and playing with constraints to figure out what each does.
You need to show more information in your description, because all of the properties of the Grid and of the Image, etc. will factor into the layout.
However, you probably want to look at the HorizontalAlignment and VerticalAlignment properties of your Grid and of your Image, as well as the Stretch property of the Image. Also, you don't want to specify a fixed size for the image (you can specify a MinWidth and a MinHeight if you want them to be a certain size when starting up).
Here's a quick example that shows a grid filling a window, with a scaling image.
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="First Row" />
<Label Grid.Column="0" Grid.Row="1" Content="Column 0, Row 1" />
<Image Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="Resources\ExamplePicture.png"
Stretch="Uniform" />