I have ran into a odd issue. I setup the same project on a wpf project and a windows store project in visual studio 2012 and am getting different results from the same xaml code. My code is
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="120,120,120,120">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button></Button>
</Grid>
In my windows store project the button does not fill the grid, it just is a tiny button on the center left.
However in the wpf project the button fills the grid like I would expect. Why the difference? What do I need to set to have the button fill the contents of the grid like it has in the past?
EDIT: I have found if I set the vertical and horizontal alignment to stretch it fills the grid. But not sure why I have to explicitly state this.
Because while the default value of the VerticalAlignmentProperty is the same (Stretch) on both platforms - Jupiter specifies in the default style for the Button type that the VerticalAlignment should be set to Center. As to why that was chosen - it could be just an oversight, some engineer or designer's preference or it could be that it just works better with the standard project templates.
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 working on a WinRT app which contains a listview. The Listview has grown recently and I need to put a vertical scrollbar around it.
So far I have hardcoded the height in the Grid to 500.
However I want to know how to set the height to detect how much space is available. This may vary depending on the device being used. How do I do that?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="500"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<TextBlock Text="*" FontSize="40" FontWeight="Bold" Foreground="Red"/>
<TextBlock Text=" = Required " FontSize="20"/>
</StackPanel>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" >
<ListView
ItemsSource="{Binding Path=Survey.SelectedSection.Questions, Mode=TwoWay}"
IsSwipeEnabled="False"
SelectionMode="None"
Background="White"
ItemTemplateSelector="{StaticResource ResourceKey=QuestionDisplay}"
ItemContainerStyle=
"{StaticResource ResourceKey=QuestionListViewItemContainerStyle}" />
</ScrollViewer>
</Grid>
So like we discussed. ListView has a ScrollViewer alread embedded in its template. The reason it would invoke scrolling with a fixed height as opposed to naturally was a fixed boundary was provided to invoke it.
By adjusting your layout so that it's parent panel (and up the parent tree) didn't include StackPanel and using Grid instead with star * sizing it allowed a boundary to invoke it as desired. The reason for this is whereas StackPanel will only consume the space required, regardless of the space available. A Grid will consume whatever space is provided while restricting its children in its layout providing that boundary necessary to invoke the scrolling of the embedded ScrollViewer which has the attached property of ScrollViewer.VerticalScrollBarVisibility set to Auto by default.
Glad you found your fix, welcome to the wonderful world of XAML which once you get used to it, you'll generally find is a lot easier to work with than it's cousin HTML. Cheers :)
I've created a ListView with custom ListViewItems which will expand if you click/tap on them. This works with two different ContentTemplates. One for the standard item and one for the expanded.
If there are about 5 items in the ListView, the RepositionThemeTransition I'm using on the ListView stutters while expanding an item. I already found out the problem, but I can't solve it.
The custom ListViewItem's content gets arranged in a Grid and the 2nd column uses StarSizing. If I use a fixed value like 300 px there is no lag and everything works as expected. But with the lag the ListView seems to get a smaller width while expanding and then again the original width after the transition.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I'm developing an application and I want to use a control which does the same job as the "DatePicker"
Any help is much appreciated, I know its name is Looping List in Telerik Controls but I don't have a subscription for Telerik.
You can use Windows Phone Toolkit
In project of your solution Go to References>Manage Nuget Packages>Online> Search for Phone.Controls>
Install Windows Phone Toolkit
In Xaml
Add the xmlns namespace
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
and Add the control in Grid
<toolkit:DatePicker Header="Select Date"/>
Sample
<phone:PhoneApplicationPage
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
xmlns:toolkit="clr- namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
//Add the Control
<toolkit:DatePicker Header="Select Date"/>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Please refer to the below sample for Windows Phone 7, hope this would work for WP 8.1
http://www.geekchamp.com/articles/wp7-loopingselector-in-depth--part1-visual-structure-and-api
Hope this could help you
It is about Looping Selector
I am making a calendar application that uses a FlipView to go between weeks, and inside each flipview is "Week" object. The Week.xaml is composed of a Grid of 1 row and 7 columns for the days of the week. Each Grid Column contains a ListView that I populate with events that the user can select from. Here's some code as an example for defining the grids and 1 column (Sunday) This also contains the name of the day and a blank textbox I populate later on with the date. You can see what it looks like as well.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Sunday-->
<Grid Grid.Column="0" >
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="#FF0353A8" Stroke="Black" StrokeThickness="5" RadiusX="10" RadiusY="10"/>
<TextBlock Grid.Row="0" Style="{StaticResource DayOfWeek}" Text="Sunday" Margin="10,6,0,38" />
<TextBlock Grid.Row="0" x:Name="SundayNumber" Style="{StaticResource DayOfWeek}" Text="" Margin="10,37,0,7" />
<ListView Name="SundayPanel" ItemTemplate="{StaticResource TaskTemplate}" IsItemClickEnabled="True" ItemClick="Item_Clicked"/>
</Grid>
What this looks like
This works great for populating items in my ListView, however I have a big problem when trying to swipe between weeks using my FlipView. Whenever I swipe left or right with my finger starting on the ListView area in order to change weeks, I get an unhandled exception like below. This does not happen when I use mouse controls to change between FlipViews, only a swiping gesture. I can click forward in back using ListView arrow controls all day with no problem.
The exception **After using the help below I can get a bit more information about the exception: Unhandled exception at 0x0f96a375 in TaskM8.exe: 0xC0000005: Access violation reading location 0x00000000.
This problem does NOT occur if I use an ItemsControl and ItemsPanelTemplate to display my items instead of a ListView, however I have not figured out how to make my individual items clickable and do things with them (I need to be able to navigate to a fullscreen description of the event after it is clicked.). Event handlers like ItemClick do not seem to be available in an ItemsControl.
Does anyone know why I would be getting this exception, or how to implement this with an ItemsControl?
A quick note about things I've tried - I've tried to replace the areas where a ListView is with nothing, or ItemControls and even with just 1 list view (in say, Friday for example), I will only get an error if I swipe starting where the ListView is. This is not feasible when the entire week page has 7 of them as the user wouldn't be able to swipe on basically 3/4 of the page :(
Thank you for your time.
I won't pretend to know why you're getting this error, but I had similar trouble debugging my app as well. You might be able to get more information on the error if you follow the advice in this post.
Try using ItemsControl instead of ListView