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.
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 want to create a standard Name and Address form like with multiple textboxs on a line to save space.
Is it better to start with Grids or Stack Panels and nest them? Is it better to create a custom control that combines TextBox and TextBlock?
I'll post my solution below. I was just curious if there's a better way to do this and what the merits of each method might be.
<!-- Snipplet of UWP XAML -->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Width="400" Background="Aqua" Padding="10"
BorderThickness="2" BorderBrush="Black" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name"/>
<TextBlock Grid.Column="1" Text="Last Name"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
Text="John"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
Text="Smith"/>
</Grid>
<TextBlock>Address1</TextBlock>
<TextBox Background="White" Text="1 Center St"/>
<TextBlock>Address2:</TextBlock>
<TextBox Background="White"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="City"/>
<TextBlock Grid.Column="1" Text="State"/>
<TextBlock Grid.Column="2" Text="Zip"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
Text="Townville"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
Text="XX"/>
<TextBox Grid.Row="1" Grid.Column="2" Background="White"
Text="12345"/>
</Grid>
<TextBlock/>
<StackPanel
Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Content="Ok" Margin="0,0,10,0"
Width="100" BorderThickness="1" BorderBrush="Black"/>
<Button Content="Cancel"
Width="100" BorderThickness="1" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
</Grid>
you can design your control as you want or you can make it separately on a UserControl but thing should be need to note here , you already put the text already on textbox instead of using placeholder text , so i change it in your code
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Width="400" Background="Aqua" Padding="10"
BorderThickness="2" BorderBrush="Black" VerticalAlignment="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name"/>
<TextBlock Grid.Column="1" Text="Last Name"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
PlaceholderText="John"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
PlaceholderText="Smith"/>
</Grid>
<TextBlock>Address1</TextBlock>
<TextBox Background="White" PlaceholderText="1 Center St"/>
<TextBlock>Address2:</TextBlock>
<TextBox Background="White"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="City"/>
<TextBlock Grid.Column="1" Text="State"/>
<TextBlock Grid.Column="2" Text="Zip"/>
<TextBox Grid.Row="1" Grid.Column="0" Background="White"
PlaceholderText="Townville"/>
<TextBox Grid.Row="1" Grid.Column="1" Background="White"
PlaceholderText="XX"/>
<TextBox Grid.Row="1" Grid.Column="2" Background="White"
PlaceholderText="12345"/>
</Grid>
<TextBlock/>
<StackPanel
Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Content="Ok" Margin="0,0,10,0"
Width="100" BorderThickness="1" BorderBrush="Black"/>
<Button Content="Cancel"
Width="100" BorderThickness="1" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
</Grid>
and you can learn basics of uwp development from this link
In the interest of performance, having only one panel is better - see the UWP app developer docs on performance. Therefore, I would use a relative panel, ending up with something like this:
<RelativePanel>
<!-- Horizontal group -->
<TextBox x:Name="TxtBx1"/>
<TextBox x:Name="TxtBx2" RelativePanel.RightOf="TxtBx1"/>
<!-- Below the first group -->
<TextBox x:Name="TxtBx3" RelativePanel.Below="TxtBx1"/>
<!-- Another horizontal group -->
<TextBox x:Name="TxtBx4" RelativePanel.Below="TxtBx3"/>
<TextBox x:Name="TxtBx5" RelativePanel.RightOf="TxtBx4"/>
</RelativePanel>
But in all honesty, there is no 'correct' answer as such - it depends on what you rank more highly in your app, be it performance or code readability.
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>
First I want to let you know that I am not really into all of the XAML features. I am creating one of my first applications in the Windows 8 .Xaml area.
Right now I'm creating a legend in which all the points that can be found in the application are explained.
For this legend I am using the Grid defenitions to define the rows and columns that are being displayed.
My question is, does someone know how to outline the defined rows and columns in the grid?
(Some of the code I used to create the legend:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lText1" Grid.Column="1" Grid.Row="0" Text="Definition 1" FontSize="33"/>
<TextBlock x:Name="lText2" Grid.Column="1" Grid.Row="1" Text="Definition 2" FontSize="33"/>
<TextBlock x:Name="lText3" Grid.Column="1" Grid.Row="2" Text="Definition 3" FontSize="33"/>
<TextBlock x:Name="lText4" Grid.Column="1" Grid.Row="3" Text="Definition 4" FontSize="33"/>
<TextBlock x:Name="lText5" Grid.Column="1" Grid.Row="4" Text="Definition 5" FontSize="33"/>
)
The easiest way is to set ShowGridLines property of your Grid to True
ShowGridLines="True"
There are other options, depending on how you want the outlines be displayed exactly. Some of those options are explained in this SO post.
UPDATE :
Since you develop on Win RT platform which doesn't have ShowGridLines property, you should make outlines on your own. The minimum effort I can think is to add Rectangle for each Row spanning through all columns, and add Rectangle for each column spanning through all rows. That way will need less Rectangles than if you create it for each cell as shown in above link. Check this other SO post for example. And example for your case :
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lText1" Grid.Column="1" Grid.Row="0" Text="Definition 1" FontSize="33"/>
<TextBlock x:Name="lText2" Grid.Column="1" Grid.Row="1" Text="Definition 2" FontSize="33"/>
<TextBlock x:Name="lText3" Grid.Column="1" Grid.Row="2" Text="Definition 3" FontSize="33"/>
<TextBlock x:Name="lText4" Grid.Column="1" Grid.Row="3" Text="Definition 4" FontSize="33"/>
<TextBlock x:Name="lText5" Grid.Column="1" Grid.Row="4" Text="Definition 5" FontSize="33"/>
<!-- Horizontal Lines -->
<Rectangle Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="1" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="2" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="3" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="4" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<!-- Vertical Lines -->
<Rectangle Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
<Rectangle Grid.Column="1" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
Just add ShowGridLines="True" to your grid
For example
<Grid Name="grdValues" Height="155" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
</Grid>
Update
<Border BorderThickness="1" Grid.Column="1" Grid.Row="0" Name="brdUsrName" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="60" Background="Black">
<TextBlock x:Name="lText1" Text="Definition 1" FontSize="33"/>
</Border>
I have an issue:
I have a fixed height page in a scroll view:
Here is the page
When i popup the keyboard:
Now the keyboard has 50% of the screen, i want the visible part of the page to scroll - how to make it. Because if the user wont tape on the page - keyboard wont close, some user will try to scroll till they get to the Send button.
Here is my xaml:
<ScrollViewer HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0">
<Grid Margin="0" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="60"/>
<RowDefinition Height="80"/>
<RowDefinition Height="60"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="#FFE3E2E2" Margin="0"></Rectangle>
<TextBlock x:Name="Comment" HorizontalAlignment="Center" Margin="10" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Foreground="Black" FontSize="22"/>
<TextBlock Grid.Row="2" Margin="10" x:Name="FeedbackTitleLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgwrgggggg" VerticalAlignment="Center" Foreground="Black" FontSize="24"/>
<TextBox x:Name="FeedbackTitle" HorizontalAlignment="Stretch" Margin="0,0,0,0" Grid.Row="3" TextWrapping="NoWrap" Text="" VerticalAlignment="Center" FontSize="24" BorderBrush="#BF7B7B7B" Background="#BFC9C9C9"/>
<TextBlock Margin="10" x:Name="FeedbackContentLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgrsgsrgsegsg" VerticalAlignment="Center" Grid.Row="4" Foreground="Black" FontSize="24"/>
<TextBox x:Name="FeedbackContent" HorizontalAlignment="Stretch" Margin="0" Grid.Row="5" TextWrapping="Wrap" Text="" VerticalAlignment="Stretch" FontSize="24" BorderBrush="#BF7B7B7B" Background="#BFC9C9C9"/>
<StackPanel Grid.Row="6" Orientation="Horizontal">
<TextBlock Margin="10,0,10,0" x:Name="AdditionalItemsLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgsgsegsrg" VerticalAlignment="Center" Grid.Row="4" Foreground="Black" FontSize="24"/>
<local:Button2 Height="80" x:Name="Photo" HorizontalAlignment="Right" Margin="10" VerticalAlignment="Stretch" Width="177" Tap="Photo_Tap"/>
</StackPanel>
<local:Button3 x:Name="Send" HorizontalAlignment="Stretch" Margin="10" Height="80" Grid.Row="8" VerticalAlignment="Stretch" Tap="Send_Tap"/>
<Grid Margin="10" Name="AttachmentGrid" Grid.Row="7" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="0,10,10,10" Grid.ColumnSpan="2" x:Name="AttachedFilesLabel" HorizontalAlignment="Left" TextWrapping="NoWrap" Text="sgrsgsrgsegsg" VerticalAlignment="Center" Grid.Row="0" Foreground="Black" FontSize="24"/>
<StackPanel Grid.Row="2" x:Name="ImageThumbs" Orientation="Horizontal">
</StackPanel>
<Rectangle VerticalAlignment="Center" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2" Height="40" Width="40" Grid.Column="1" Fill="#FFC2C2C2" Stroke="Black" RadiusX="5" RadiusY="5" Tap="DeleteAttach_Tap"/>
<Image Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" Grid.Column="1" Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center" Source="../*/delete.png"/>
</Grid>
<Grid Name="MessageGrid" Margin="10" Visibility="Collapsed" Grid.Row="1">
<Rectangle Fill="#00A7D1" Margin="0,0,0,0" Height="80" RadiusX="5" RadiusY="5"/>
<TextBlock x:Name="Message" HorizontalAlignment="Center" Margin="10" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Foreground="White" FontSize="22"/>
</Grid>
</Grid>
</ScrollViewer>
Example of what i want it to look like, go to the contact adding in WP, add name:
The hightlighted area can be scrolled, i want it in my app...
I had the same issue. but at last i solved it, i just used the Height property to do this. Please do the following steps
First create a ScrollViewer
Indide the ScrollViewer create a container(eg: Grid/StackPanel/Border etc...) and put every controlls inside it.
Set fixed Height for ScrollViewer and the Container (Note: Height of container should be greater than ScrollViewer's Height)
See the below Code
<ScrollViewer Height="500">
<Grid Name="Container" Height="700">
<TextBox/>
<TextBox/>
<TextBox/>
</Grid>
</ScrollViewer>
Now you can scroll the container Grid Even the KeyBoard shown or even focus on a TextBox.