I am getting the content of my text box from a web rest Api (i.e by binding it to a observable collection). Now for a particular item some content is more for some it is less and I have another grid below it which have three icons in it. Now I want the textbox to be adaptive for large content in text box the icons should always be below the content.
Now for small content the icons should automatically come below the text. How should I achieve it.
If you are asking how to dock the buttons on the bottom of the view then you can change the row heights to be something like this:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
In this layout the buttons will take only the height they need while the textblock will take the rest of the available space. Just make sure the textblock is on row 0 and the buttons are on row 1. Or adjust if you have a header (header on row 0, textblock on row 1 and buttons on row 2).
Related
I'm trying to allow vertical scrolling on a list of settings, using an ItemsControl inside of a ScrollViewer. The scrolling works when I set the Height of the ScrollViewer to a constant like 400, but stops working when I set the height to auto or set the VerticalAlignment to stretch.
Here's my code
<ScrollViewer VerticalAlignment="Stretch" >
<ItemsControl ItemsSource="{x:Bind _settingsViewModel.Settings}"
ItemTemplate="{StaticResource SettingTemplate}"/>
</ScrollViewer>
How can I set the Height of the ScrollViewer to fit the size of the screen but still allow scrolling?
Edit:
I should also mention that my page exists as a content page inside of a NavigationView.
Here is everything inside my navigation view:
<StackPanel>
<breadcrumb:BreadcrumbControl
x:Name="breadcrumbTrail"
DisplayMemberPath="Title"
HomeText="Home"
Seperator="/"
OverFlow="..."
HomeSelected="breadcrumbTrail_HomeSelected"
/>
<Frame x:Name="ContentFrame" Margin="24" Navigated="Frame_Navigated">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition/>
</TransitionCollection>
</Frame.ContentTransitions>
</Frame>
</StackPanel>
According to this post a ScrollView cannot exist inside of a stack panel without directly setting the height of the of the ScrollView. Since this ScrollView exists inside of a Frame that is nested inside of a StackPanel you will run into the issue described.
You could use a Grid instead of a StackPanel to achieve the effect you are looking for.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<breadcrumb:BreadcrumbControl
x:Name="breadcrumbTrail"
DisplayMemberPath="Title"
HomeText="Home"
Seperator="/"
OverFlow="..."
HomeSelected="breadcrumbTrail_HomeSelected"
Grid.Row="0"
/>
<Frame x:Name="ContentFrame" Margin="24" Navigated="Frame_Navigated" Grid.Row="1">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition/>
</TransitionCollection>
</Frame.ContentTransitions>
</Frame>
</Grid>
The problem is that you need to cap the dimension the ScrollViewer object can occupy!
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
So what did we define above?
Defined a parent layout container of type Grid.
The Grid layout container has 3 rows, with the middle row taking as much space as required, while the first and last will have the real estate leftovers divided equally between them.
Now we decide to define the ScrollViewer inside the middle row.
This is a problem! You have defined your ScrollViewer inside a row which will define it's height according to the content that it holds.
This definitely goes against the concept of a ScrollViewer! How can you scroll something, if you are setting it to take as much space as required to hold all of its children? Even if the size doesn't go "over" the screen size, it will still not be possible to actually scroll through anything since you have not set a maximum height for the ScrollViewer, and therefore all the content can actually be displayed without any scrolling at all.
The problem can get even worse, when the content inside the ScrollViewer occupies so much real estate, that it will eat all the space you would want to have for the other layout areas. And in this worse situation, it is still not possible to scroll through anything, despite existing layout which is not being shown to us ...
How can we resolve this? Either by setting the MaxHeight dependency property of your ScrollViewer, as you have already done, or by changing the definition of the layout container.
Now, I will simply set the middle row to have 2* times the size of the other 2 rows (now there exists a limitation on the size of the ScrollViewer):
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Now we can simply define the ScrollViewer as part of the middle row, like this:
<ScrollViewer Grid.Row="1" ...>
If the content insides it occupies more than the calculate *2** size, you will see the ScrollViewer scrolling in action, just like you want to!
Just as a minor suggestion, I generally like to define some of the Attached Properties defined in the ScrollViewer class, such as the ScrollViewer.VerticalScrollBarVisibility and the ScrollViewer.VerticalScrollMode in the definition of the object (for focused the horizontal scroll behavior, we have the same logic but for the attached properties HorizontalScrollMode and HorizontalScrollBarVisibility)
In this case I would define them as Attributes of the ScrollViewer, rather than an attached property defined in the children of the ScrollViewer, simply because it becomes easier to understand the developer intentions and i prefer the Auto definition for the ScrollMode behavior.
<ScrollViewer Grid.Row="1"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Auto"> ... </ScrollViewer>
I am developing a windows 8.1 store app.By default windows store apps generate pages which are having 10.6" screen size and 1366*768 resolution.I want my every xaml page to fit on all screen sizes and resolutions.I solved this problem by using a Viewbox but only one page is not behaving as expected.I am doing this:<Viewbox>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
The grid is not taking the whole width of the page but Viewbox is taking.Please help.
By default the ViewBox will Stretch Uniform to maintain the aspect ratio of its contents. You can set its Stretch property to Fill if you want it to distort to fill the whole page.
You don't include the contents of the Grid in your code snippet, so it's not clear what all you have in there to know how it would stretch. Since it's stretching to fill vertically but not horizontally I expect your contents are taller than they are wide.
As Chris W notes in his comment, ViewBox is probably not what you want here. In general you're better off using flexible layout controls such as the Grid. If you remove the ViewBox the Grid (assuming it's in the root of the page) will expand to the full Window size. Using relative row and column sizes (as you do) rather than hardcoding sizes the layout should adjust to the page size.
For extreme differences such as portrait vs. landscape vs. skinny you may want to use Visual States to provide different layouts for the same content. MSDN's Quickstart: Designing apps for different window sizes goes into detail on how to do this.
We have put a scroll viewer inside a content panel in design page of a databound app. We have to add more number of textblocks inside the scrollviewer which we cannot do by dragging and dropping from the toolbar as the design shows only three textblocks...
You can add the textboxes manually and specify it's margin. You don't need to drag and drop. For example:
<Grid x:Name="Content Panel">
<ScrollViewer>
<TextBox x:Name="textbox_1" Margin="10,0,0,0"/>
<TextBox x:Name="textbox_2" Margin="10,10,0,0"/>
<TextBox x:Name="textbox_3" Margin="10,20,0,0"/>
<TextBox x:Name="textbox_4" Margin="10,30,0,0"/>
..and so on.
Margin parameters are Left, Top, Right and Bottom. Keep increasing the top margin to push the control below.
Background
In my XAML I have a data template that defines the layout of items within a listbox. To my model class I have added some properties that I am binding to that are specifically for managing the presentation. In short I have some events in date order, and every time I get to a new date I want to include a heading row as well. So to so this I have some rows that are defined as Height = Auto.
Problem
When its the first object for a new day my properties return data - the row is filled and all looks good. When its not the first object for the day, the properties returns null and the row does not appear. Works well. Mostly.
But when I have say 15 or so objects and I scroll down then the 'heading rows' are appearing but with empty values (sometimes). I have checked the data numerous times and its fine. And then, even weirder, the act of scrolling up and down can make it come right, or, move the place where bogus heading lines are happening. So I firmly believe its not related to my data. I thought it may relate to how quickly I am scrolling but this does not seem to be the case. My XAML follows - There is a comment in there indicating where the heading lines are defined. (the bindings that use 'NewDateTimeDayString' and 'NewDateTimeHeaderFiller"
<StackPanel Grid.Row="0" Grid.ColumnSpan="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--This stackpanel and the row beneath are causing issues - sometimes appearing when it should not based upon the data-->
<!--size is auto and row is effectively dropped when there is no data-->
<!--BUT sometimes when scrolling up and down they appear as empty -->
<StackPanel Background="{StaticResource PhoneAccentBrush}">
<TextBlock Grid.Row="0" Text="{Binding NewDateTimeDayString}"
Style="{StaticResource PhoneTextNormalStyle}" Margin="{Binding MarginSize}" />
</StackPanel>
<TextBlock Text="{Binding NewDateTimeHeaderFiller}" Grid.Row="1"/>
</Grid>
</StackPanel>
Any ideas on why this may be occurring, or an alternative approach would be appreciated. Hugely. Thanks.
Discussed it with a colleague who suggested that I make alter the Stackpanel visibility using a binding. Suggested that this approach might be more approproate rather than rely upon the (auto) size of a row. Have now implemented this and the problem is resolved.
I have a custom WPF control to display a list of items using an ItemsControl. The ItemsPresenter is defined in the template to display the list and it is embedded inside a ScrollViewer for scrolling purposes:
<ControlTemplate TargetType="ItemsControl">
<Grid x:Name="LayoutRoot">
<ScrollViewer Margin="3">
<ItemsPresenter/>
</ScrollViewer>
</Grid>
</ControlTemplate>
My application creates two instances of the custom control to show the list side by side.
What I want is when user selects an item on the first one, the second control automatically scrolls so that the same item is displayed in the same position relative to the top. To accomplish this I need to know
How to get the position (in pixels) of the selected item in the first control?
How to scroll to the same position in the second control?
Are there any other ways to do this?