I have the following XAML:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
Right now the grid is at the center of the screen, I wabt it to be a little bit higher, I can do it with margin, but I don't want any propery with pixel in my page. Is there any other wahy to do it?
Thanks.
The easiest way to get your grid slightly above the centre without using Margins would be to put it in another Grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="1.2*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
</Grid>
Note the second RowDefinition
<RowDefinition Height="1.2*"/>
This means the second row will take slightly more of the available space than the first row and you can adjust to meet your needs.
Related
I'm designing uwp apps. My pc resolution is 1920 x 1080, 100% scale. All the elements are layout normal.
But when running app on a screen 1920 x 1080, 125% scale, the elements are not in the right place and all are 1.25x bigger.
So how to disable scale under all resolutions, or is there any solutions?
I am giving you the simple example in which i am showing two buttons and one grid you can run this on any resolution the left and right hand side button always keep in same position and grid will change accordingly resolution size
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition Height="169*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="113*"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,55,10,40" />
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,55,10,40" Grid.Column="2" />
<Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" BorderThickness="2" Grid.RowSpan="2"/>
</Gid>
your code sample
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="945"/>
<ColumnDefinition Width="945"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Color"
Margin="117, 84, 0, 0"
FontSize="48"/>
<Button Grid.Row="1" Content="Red" Width="500" Height="80" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="445 30 0 0"
/>
<Button Grid.Row="1" Grid.Column="1" Content="Yellow" Width="500" Height="80"
Margin="0 30 445 0"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Grid Grid.Row="2" Grid.ColumnSpan="2"
Margin="84 40 84 0" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" BorderBrush="Black" BorderThickness="2"/>
</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.
I´m trying to build a UWP app and I have the follow components:
MainPage:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Name="TituloStackPanel" Orientation="Horizontal">
<Button Name="HamburguerButton" Content="" FontFamily="Segoe MDL2 Assets" Height="50" Width="50" Click="HamburguerButton_Click"/>
<TextBlock Name="Titulo" Text="Estrutura de Dados" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
<SplitView Name="PrincipalSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="200" Grid.Row="1">
<SplitView.Pane>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="ListasButton" Content="L" Width="50" Height="50" Click="ListasButton_Click"/>
<TextBlock Text="Listas" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="PilhasButton" Content="P" Width="50" Height="50"/>
<TextBlock Text="Pilhas" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="FilasButton" Content="F" Width="50" Height="50"/>
<TextBlock Text="Filas" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<TextBlock Text="SplitView Content" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</SplitView.Content>
</SplitView>
</Grid>
The next Page will be loaded inside the Content of the SplitView.
<Page>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<ScrollViewer Background="Cyan" Grid.Column="1" VerticalScrollBarVisibility="Auto">
<RelativePanel Padding="20" MaxHeight="700" VerticalAlignment="Top">
<A lot of Components: TextBlocks, TextBoxes, RadioButtons, ... />
</RelativePanel>
</ScrollViewer>
</Grid>
</Page>
The ScrollViewer should work as a Toolbar on the right side of the window. But when I resize the window, the vertical scroll not works.
Full screen:
Resized:
The problem is because your SplitView is in the Row with the <RowDefinition Height="Auto"/>. This makes the SplitView higher than the Screen and does not scroll as a result.
Use <RowDefinition Height="*"/> for this row to make it as high as the screen is.
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<SplitView Grid.Row="1">
....
</SpitView>
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>
I am creating an app in Silverlight 4 with MVVM Light.
At present I have a page with many controls ie. StackPanels, Listbox, TexBlocks and Buttons. I have a busyindicator on the page that is bound to a viewmodel. When a button is clicked to say retrieve data from the database the busyindicator displays and vanishes when the call is completed.
This all works as it should.
What I want to happen is that the whole page is wrapped in the busyindicator so that the page dims and nothing works until the event is completed. I have read that you just wrap the control inside the Busyindicator.
No matter where I place the opening of the indicator I get blue lines showing 'The property Content is set more than once.'
I have posted the code below, could anyone explain where to put the indicator code.
<Grid.RowDefinitions>
<RowDefinition Height ="0" />
<RowDefinition Height ="30" />
<RowDefinition Height ="60" />
<RowDefinition Height ="Auto" />
<RowDefinition Height ="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Header" Width="353" Margin="0 0 0 0" Height="30" />
<StackPanel Grid.Row="2" VerticalAlignment="Center" Orientation="Horizontal" >
<Button Grid.Row="2" Grid.Column="0" Content="GetData" Height="35" Width="130" HorizontalAlignment="Left" Margin="0,0,0,0" Command="{Binding GetData}"></Button>
<!-- <toolkit:BusyIndicator Width="150" Height="50" IsBusy="{Binding IsBusy}" BusyContent="Searching ..." /> -->
</StackPanel>
<ListBox x:Name="MyListBox" Grid.Row="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Content="Delete" VerticalAlignment="Center"
Command="{Binding Delete}"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Grid.Row="4" Margin="5,10,0,0" Text="{BindingMessage}"></TextBlock>
</Grid>
You need to put all the content inside the user control as shown below:
<toolkit:BusyIndicator Width="150" Height="50" IsBusy="{Binding IsBusy}" BusyContent="Searching ...">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height ="0" />
<RowDefinition Height ="30" />
<RowDefinition Height ="60" />
<RowDefinition Height ="Auto" />
<RowDefinition Height ="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Header" Width="353" Margin="0 0 0 0" Height="30" />
<StackPanel Grid.Row="2" VerticalAlignment="Center" Orientation="Horizontal" >
<Button Grid.Row="2" Grid.Column="0" Content="GetData" Height="35" Width="130" HorizontalAlignment="Left" Margin="0,0,0,0" Command="{Binding GetData}"></Button>
</StackPanel>
<ListBox x:Name="MyListBox" Grid.Row="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Content="Delete" VerticalAlignment="Center" Command="{Binding Delete}"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Grid.Row="4" Margin="5,10,0,0" Text="{BindingMessage}"></TextBlock>
</Grid>
</toolkit:BusyIndicator>