There are three child grid under one parent grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Name="grid1"> </Grid>
<Grid Grid.Row="1" Name="grid2"> </Grid>
<Grid Grid.Row="2" Name="grid3"> </Grid>
</Grid>
if grid2 has more data then all three grids are scrolling.
I want the Position of grid1 and grid3 should be fixed, only middle grid should scroll
If you can , please use fixed size value for grid1 and grid3 Rows Height
You can use Scroll Viewer control
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalAlignment="Top" Name="grid1"> </Grid>
<Grid Grid.Row="1" Name="grid2">
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
//Content Here
</ScrollViewer>
</Grid>
<Grid Grid.Row="2" VerticalAlignment="Bottom" Name="grid3"> </Grid>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Name="grid1" Margin="10">
<TextBlock Text="Some Data"/>
</Grid>
<Grid Grid.Row="1" Name="grid2" Margin="10">
<ScrollViewer VerticalScrollMode="Auto">
<StackPanel>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
<TextBlock Text="Some Data "/>
</StackPanel>
</ScrollViewer>
</Grid>
<Grid Grid.Row="2" Name="grid3" Margin="10">
<TextBlock Text="Some Data"/>
</Grid>
</Grid>
*You Need to set Horizontal/Vertical Scroll Mode to Auto/Enable
Related
I've a split view (UWP) that inside a scrollviewer with horizontal scrolling enabled. The code shown below has a user control embedded with displays data in a horizontally stacked fashion. I've a header menu which upon clicked should open a split view from right to left. But, whenever there is a horizontal scrolling, the split view opened is not responsive. When i resize the window with splitview opened and horizontal scrolling enabled, I see the app not responsive. What should I do to make the split view response.
By default, I see the splitview responsive whenever there is no horizontal scrolling.
The user control (KanbanControl) shown below is basically a gridview that uses ItemsWrapGrid as it's panel template stacked horizontally
Things tried out:-
a) Tried to disable the horizontal scrolling when the split view is about to be opened, but it is of no help.
Any thoughts folks?
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
</ScrollViewer>
Remove the outer scroll viewer from the splitview and wrap it inside the user control Kanban control. This would make the app responsive.
Code snippet is as follows
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
KanbanControl.xaml
<Grid Margin="0,20,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
// Horizontally stacked listview goes here.
</ScrollViewer>
</Grid>
I am working on Windows Phone 8.1 app (Windows Runtime)and I have created a page with the following layout :
<Grid Grid.Row="1" Margin="0, 10, 0, 5" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<maps:MapControl x:Name="LocationMap" Grid.Row="0" Height="220"
MapServiceToken="..."/>
<Hub Grid.Row="1" Margin="0, 25, 0, 0">
<HubSection Header="ABOUT" x:Name="AboutHubSection">
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="ShortDescriptionPanel" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" local:TextBlockExtension.FormattedText="{Binding ShortDescription}" FontSize="16" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Text="Show more" Visibility="{Binding IsDescriptionTooLong, Converter={StaticResource BoolToVisibilityConverter}}" FontSize="16" Foreground="{StaticResource PhoneAccentBrush}" Tapped="OnShowMoreTapped"/>
</Grid>
<Grid x:Name="FullDescriptionPanel" Grid.Row="1"
Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding FullDescription}" FontSize="16" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Text="Show less" Visibility="Visible" FontSize="16" Foreground="{StaticResource PhoneAccentBrush}" Tapped="OnShowLessTapped"/>
</Grid>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="RSVP" x:Name="RsvpHubSection" Margin="0, 0, 0, 50">
<DataTemplate>
<ScrollViewer>
<TextBlock FontSize="16" TextWrapping="Wrap"
Text="{Binding RSVP}"/>
</ScrollViewer>
</DataTemplate>
</HubSection>
<HubSection Header="Statistics" x:Name="StatisticsHubSection" Margin="0, 0, 0, 50">
<DataTemplate>
<ScrollViewer>
<TextBlock FontSize="16" TextWrapping="Wrap"
Text="{Binding Stats}"/>
</ScrollViewer>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Grid>
So the content of the page consists of a map control which takes 220 units of Height and the rest should be a Hub with three sections. The HubSections should have their content available for VerticalScrolling if it is the case.
In my particular case, the AboutHubSection should have its content vertically scrollable. The two panels (Short and Full Descriptions) are displayed/hidden one at a time to simulate a "Show more" link which expands the initial short description with a full description of the item. Unfortunately, when the full description is shown, the area does not become scrollable. The textblock that might contain scrollable content is
<TextBlock Grid.Row="0" Text="{Binding FullDescription}" FontSize="16" TextWrapping="Wrap"/>
in the FullDescriptionPanel Grid. I've tried to wrap with a scrollviewer and it didn't work and I'm unsure of what else to try.
Any ideas? Thanks in advance.
You need to set a height limit for your rows.
In your first grid, you should set the second row to Height="*" so your hub control will not be able to expand indefinitively. Since you have used Auto for the two rows, they will each take as much space as needed to fit their content. Using star for the second row will force it to no be bigger than the remaining space.
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
You will have then to do the same for your "full description" view to restrict the space for the long text.
<Grid x:Name="FullDescriptionPanel" Grid.Row="1" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<TextBlock Text="{Binding FullDescription}" FontSize="16" TextWrapping="Wrap"/>
</ScrollViewer>
<TextBlock Grid.Row="1" Text="Show less" Visibility="Visible" FontSize="16" Foreground="{StaticResource PhoneAccentBrush}" Tapped="OnShowLessTapped"/>
</Grid>
Below is the DataTemplate for GridView. I just change GridView to ListView
I want to do this:
2 or more columns in DataTemplate for the ListView to display
a) 2 columns Text
or
b) 2 columns Image in Square Box like 300 x 200.
How to I design the DataTemplate for ListView?
Thanks
1) DataTemplate declare in ResourceDictionary for Gridview. Can use this for ListView?
<DataTemplate x:Key="CustomerTemplate">
<Grid Background="Blue" Width="300" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}"
Grid.Row="0"
Margin="20,10,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
FontSize="24"
FontWeight="SemiBold"/>
<TextBlock Text="{Binding No}"
Grid.Row="1"
Margin="20,0,0,0"
VerticalAlignment="Center"
FontSize="18"/>
<TextBlock Text="{Binding Contact}"
Grid.Row="2"
Margin="20,0,0,0"
VerticalAlignment="Center"
FontSize="18"/>
<TextBlock Text="{Binding Address}"
Grid.Row="3"
Margin="20,0,0,0"
VerticalAlignment="Top"
FontSize="18"/>
<TextBlock Text="{Binding Id}"
Grid.Row="3"
Margin="200,0,0,0"
VerticalAlignment="Top"
FontSize="18"/>
</Grid>
</DataTemplate>
-- Use the DataTemplate for ListView.
What need to do for the DataTemplate?
<ListView x:Name="CustomersGridView"
Grid.Row="1"
Foreground="White"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="True"
ItemsSource="{Binding Mode=OneWay, Source={StaticResource CustomersViewSource}}"
ItemTemplate="{StaticResource CustomerTemplate}"
ItemClick="CustomersGridView_ItemClick"
SelectionChanged="CustomersGridView_SelectionChanged">
</ListView>
Just add an outer grid and add 2 more columns to that.
<Grid Width="900">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- FIRST COLUMN -->
<Grid Background="Blue" Width="300" Height="200" Grid.Column="0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}"
Grid.Row="0"
Margin="20,10,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
FontSize="24"
FontWeight="SemiBold"/>
<TextBlock Text="{Binding No}"
Grid.Row="1"
Margin="20,0,0,0"
VerticalAlignment="Center"
FontSize="18"/>
<TextBlock Text="{Binding Contact}"
Grid.Row="2"
Margin="20,0,0,0"
VerticalAlignment="Center"
FontSize="18"/>
<TextBlock Text="{Binding Address}"
Grid.Row="3"
Margin="20,0,0,0"
VerticalAlignment="Top"
FontSize="18"/>
<TextBlock Text="{Binding Id}"
Grid.Row="3"
Margin="200,0,0,0"
VerticalAlignment="Top"
FontSize="18"/>
</Grid>
<!-- SECOND COLUMN -->
<Grid Grid.Column="1"></Grid>
<!-- THIRD COLUMN -->
<Grid Grid.Column="2"></Grid>
</Grid>
Why don't you use a GridView with some adjustments to the internal ScrollViewer of the GridView? like making it vertically scrollable and allowing it to have 3 items per row. By doing so, you can just keep the data template to hold just single item. Here is the sample for that:
<GridView ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Enabled">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
How can i set suitable size for listbox in Portrait Or Landscape views automatically ?
I don't have any problem in portrait view :
But in landscape view the listbox height is not okey , and listbox has not to be on recordpanel.
this is my xaml code :
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#E9E9E9" Offset="0"/>
<GradientStop Color="#FEFEFE" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<MediaElement Name="SoundPlayer" AutoPlay="False" Volume="1" />
<StackPanel Grid.Row="0">
<StackPanel x:Name="StackPanelTopBar" >
</StackPanel>
<phone:Pivot Height="40" Background="#F9A11D" SelectionChanged="Pivot_SelectionChanged" >
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="24" Text="{Binding}" Margin="0,-5,0,0"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="Alle"/>
<phone:PivotItem Header="A-E"/>
<phone:PivotItem Header="F-J"/>
<phone:PivotItem Header="K-O"/>
<phone:PivotItem Header="P-T"/>
<phone:PivotItem Header="U-Z"/>
</phone:Pivot>
<ListBox x:Name="ListBoxAlphabet" Height="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<controls:RoundButton Tag="{Binding File}" Content="{Binding Label}" FontSize="30" ButtonHeight="90" ButtonWidth="90"
HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Background="#FFD0D2D3" Foreground="White" PressedBrush="#F9A11D" BorderBrush="{StaticResource TransparentBrush}" Click="RoundButtonAlphabet_Click" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<Grid x:Name="RecordPanel" Grid.Row="1" Margin="0,0,0,8">
<StackPanel VerticalAlignment="Bottom" Height="100">
<userControls:SoundRecorderPanel></userControls:SoundRecorderPanel>
</StackPanel>
</Grid>
</Grid>
I don't know if I understood right, but if you want that record panel is on the alphabets and alphabets-list is scrollable, then I can help.
The reason why alphabets-listbox is on the record panel, is that you put listbox to the stackpanel. And stackpanel is on the grid row, which height-property is auto. If you want that record panel is on to alphabets, you should define your row definition like this:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
But then of course listbox doesn't fit to the screen and you have to scroll list if you want to see all alphabets.
Edit: You have to also change the stackpanel, where listbox and pivot is, to the grid like this:
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="StackPanelTopBar" Grid.Row="0" >
</StackPanel>
<phone:Pivot Height="80" Background="#F9A11D" Grid.Row="1" SelectionChanged="Pivot_SelectionChanged">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="24" Text="{Binding}" Margin="0,-5,0,0"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="Alle"/>
<phone:PivotItem Header="A-E"/>
<phone:PivotItem Header="F-J"/>
<phone:PivotItem Header="K-O"/>
<phone:PivotItem Header="P-T"/>
<phone:PivotItem Header="U-Z"/>
</phone:Pivot>
<ListBox x:Name="ListBoxAlphabet" Height="Auto" Grid.Row="2">
// and so on...
Hopefully this helps!
I need to make a form in XAML on Windows 8 for entering an address. I don't need the "Contact Person" header, but this is how it should look:
The example is from an HTML5 Forms demo for IE.
I tried a 2 column Grid, but the TextBlocks and TextBoxes don't easily line up.
What's the simplest way to do this?
This is how you could do it using a Grid which seems a good solution for me:
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="2" Grid.Row="0" Text="Name:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="0" Grid.Column="1" Text="John Doe"/>
<TextBlock Margin="2" Grid.Row="1" Text="Address:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="1" Grid.Column="1" Text="1 Microsoft Way"/>
<TextBlock Margin="2" Grid.Row="2" Text="City:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="2" Grid.Column="1" Text="Redmond"/>
<TextBlock Margin="2" Grid.Row="3" Text="State:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="3" Grid.Column="1" Text=""/>
<TextBlock Margin="2" Grid.Row="4" Text="Zip Code:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="4" Grid.Column="1" Text="98052"/>
<TextBlock Margin="2" Grid.Row="5" Text="Email Address:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="5" Grid.Column="1" Text="john.doe#microsoft.com"/>
<TextBlock Margin="2" Grid.Row="6" Text="Telephone Number:" Style="{StaticResource BodyTextStyle}"/>
<TextBox Margin="2" Grid.Row="6" Grid.Column="1" Text="(425) 333-4444"/>
</Grid>
Here's the result:
Aren't the TextBlocks and TextBoxes lined up okay?
Incidentally, you can get that "Contact Person" box by surrounding Damir Arh's answer with a GroupBox.