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
Related
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 :)
Background
I am developing a UWP app, which is being designed for mobile, desktop etc.
I am having a bit of difficulty with the CommandBar on certain pages - specifically on a phone (but this may also apply to a smaller desktop window).
Issue
Where I require quite a few AppBarButtons on the CommandBar, sometimes it overflows and I am unable to see/access the hidden buttons.
Here is a sample screenshot where you can see that the "Documents" label is being cut off. There is also another button (which cannot be seen/accessed) which I guess you would say is "underneath" the ... button:
XAML
Shortened for brevity (nothing special/out of the ordinary here)
<CommandBar>
<!-- Secondary Commands -->
<CommandBar.SecondaryCommands>
<AppBarButton Command="{Binding RefreshCommand}"
Icon="Refresh" Label="Refresh"/>
<AppBarButton Command="{Binding AddToLibraryCommand}"
Icon="Save" Label="Add to Library"/>
</CommandBar.SecondaryCommands>
<!-- Primary Commands -->
<CommandBar.PrimaryCommands>
<AppBarButton Command="{Binding CompleteFormCommand}"
Icon="Paste" Label="Complete a Form" />
<AppBarSeparator />
<AppBarButton Command="{Binding ViewPeopleCommand}"
Icon="People" Label="People" />
<AppBarButton Command="{Binding ViewPropertiesCommand}"
Icon="Home" Label="Properties" />
<AppBarButton Command="{Binding ViewDocumentsCommand}"
Icon="Folder" Label="Documents" />
<AppBarSeparator />
<AppBarButton Command="{Binding ViewMapCommand}"
Icon="Map" Label="Map" />
</CommandBar.PrimaryCommands>
</CommandBar>
What I need
I still need the other AppBarButtons to be accessible by the user.
The amount of buttons on each CommandBar can vary - sometimes they fit fine, some have 1 (like the example) hidden, others have 2 or 3 hidden.
I am thinking that (surely, somehow) it might be possible somehow to allow horizontal scrolling in order to access the other buttons?
What I have tried
I have resorted to moving some of the non-essential commands to the CommandBar.SecondaryCommands, to free up some space; as can be seen in the screenshot/XAML above - however, the main problem is still apparent.
There is no ScrollViewer attached property, and trying to nest the AppBarButtons inside one naturally throws me a compiler error:
Invalid type: expected types are IObservableVector<ICommandBarElement> or ICommandBarElement, actual type is ScrollViewer.
I have searched the Web far and wide for answers to see if it is possible, and it doesn't appear there is much literature (or any similar StackOverflow answers) on how I can go about solving this issue.
All advice is greatly appreciated. Thank you in advance.
As for me, it is not pretty good UX behavior, but you can override Style for CommandBar and wrap primary ItemsControl into ScrollViewer.
Find the default style and find the PrimaryItemsControl and replace to:
<ScrollViewer VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Disabled"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible">
<ItemsControl x:Name="PrimaryItemsControl"
HorizontalAlignment="Right"
MinHeight="{ThemeResource AppBarThemeMinHeight}"
IsTabStop="False"
Grid.Column="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
After that don't forget apply new style for CommandBar:
<CommandBar Style="{StaticResource ScrollablePrimaryComamndCommandBar}">
P.S. full xaml on pastebin
I think this is best explained with an example
<Grid>
<StackPanel Panel.ZIndex="1">
<Rectangle Width="100" Height="100" Fill="red" Panel.ZIndex="100"/>
</StackPanel>
<StackPanel Panel.ZIndex="2">
<Rectangle Width="100" Height="100" Fill="blue" Panel.ZIndex="1"/>
</StackPanel>
</Grid>
The result is that the blue rectangle wins, however I want to have the red one on top. This is easily fixed in this example of course. The real situation is that I'm dealing with multiple movable controls (that have z order between themselves) and I want some important bits of a control to be accessible even if something is ontop of that control.
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
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.