I have the following XAML code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="#FFE8E8E8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,0" >
<TextBlock x:Name="AppName" Text="Agent" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0" Foreground="Black" />
<TextBlock x:Name="PageName" Text="agent audit" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="100" Foreground="Black"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Background="White"/>
<ScrollViewer HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" VerticalAlignment="Top">
<TextBlock x:Name="auditText" HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Foreground="Black" Padding="10"/>
</ScrollViewer>
</Grid>
When the page comes into view I assign the TextBlock with the contents of an API Call (audit log text), and this gets quite long.
However, currently it cuts off all text below the screen height. I have the TextBlock and ScrollView set to Auto layout height/width.
I can even see the top of the next line of text, when I scroll the rest doesn't appear. Quite hard to screenshot too as you only see the issue when scrolling, and whilst scrolling I can't take a screenshot :/
Any ideas where I'm going wrong?
I've read numerous posts on this site but nothing quite hit what I was after.
Thanks.
This ended up working for me:
<ScrollViewer Height="Auto" Grid.Row="1">
<TextBlock x:Name="auditText" Text="TextBlock"
VerticalAlignment="Top" Foreground="Black" Margin="0,10,0,0" Grid.Row="1" Padding="20" TextWrapping="Wrap">
</TextBlock>
</ScrollViewer>
Setting the ScrollViewer height to AUTO
Related
I have some DataTemplate for Windows GridView in corresponding platform. In this template there should be picture with some text. This text should have background, but only for readibility purposes. I want to have this background to be transparent so image could be seen through it. However, when I set background in format #4C000000, nothing happens and it stays solid black.
<DataTemplate x:Key="GridViewPlayerDataTemplate">
<Grid Height="100" Width="100" >
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Image x:Name="ImageRoleImage" Stretch="UniformToFill" Source="{Binding Guess.PlayerRole.ImageSource , Mode=OneWay, Converter={StaticResource ImageConverterHou}}" />
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Opacity="0.1" Grid.RowSpan="1" Background="#4C000000">
<TextBlock x:Name="TextBlockPlayerName" Opacity="1" TextWrapping="Wrap" Text="{Binding Actor.Name}" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="1" Grid.RowSpan="1" Background="#4C000000">
<TextBlock x:Name="TextBlockPlayerGuessedRole" TextWrapping="Wrap" Text="{Binding Guess.PlayerRole.Name}" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
</DataTemplate>
I tried to create this pure Windows Store application and transparency works just fine.
Can anyone tell me something about this strange behaviour and/or how to fix it?
I'm working on an app for windows 10. I've previously worked on a handful of Windows 7 applications and I'm trying to get use to the many differences now. I'm trying my luck at a universal app, and I'm wanting to centre a handful of controls so that no matter the screen/windows size the login details are centred.
I've been searching for help with this for a while, but I've found a lot of this to be in its' infancy; in other words there's not a lot of places I'm finding relevant information, never mind helpful. I was hoping someone on here could point me in the right direction?
Here's the window on the desktop view:
Here's what I'm meaning, the textboxes, labels ect don't move with the resize of the window, let alone different screen sizes.
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FlyoutBase.AttachedFlyout="{StaticResource FlyoutBase1}">
<CheckBox x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" Margin="1038,441,0,0" VerticalAlignment="Top" ClickMode="Press"/>
<TextBox x:Name="txtUserName" HorizontalAlignment="Left" Margin="818,441,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="202"/>
<PasswordBox x:Name="txtPassword" HorizontalAlignment="Left" Margin="818,478,0,0" VerticalAlignment="Top" Width="202"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="723,446,0,0" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Top"/>
<TextBlock x:Name="textBlock_Copy" HorizontalAlignment="Left" Margin="735,478,0,0" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Top"/>
<Button x:Name="btnSignin" Content="Login" HorizontalAlignment="Left" Margin="959,539,0,0" VerticalAlignment="Top" Width="61"/>
<Button x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Left" Margin="818,539,0,0" VerticalAlignment="Top" Width="116"/>
<ProgressRing x:Name="progressring1" HorizontalAlignment="Left" Margin="873,592,0,0" VerticalAlignment="Top" Height="87" Width="103"/>
<TextBlock x:Name="txtStatus" HorizontalAlignment="Left" Margin="818,510,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
<Grid HorizontalAlignment="Left" Height="180" Margin="692,412,0,0" VerticalAlignment="Top" Width="496"/>
</Grid>
Don't use Margins for positioning. Use margins only to enforce margins around the object.
To center an element in its parent set its HorizontalAlignment or VerticalAlignment to Center.
For more control, use layout controls such as Grid, StackPanel, and RelativePanel to position the controls where you want. For your layout you could set up 3 Rows and 3 Columns in your Grid to place the controls overall and then set the HorizontalAlignment to place the controls in the grid. Here's a quick update to your Xaml that will keep things centered so long as the window is wide enough for everything to fit (you can use adaptive techniques to reflow things for narrower views)
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="2" Grid.Row="1" Margin="10,0" x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" VerticalAlignment="Top" ClickMode="Press"/>
<TextBox Grid.Column="1" Grid.Row="1" x:Name="txtUserName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Top" />
<PasswordBox Grid.Column="1" Grid.Row="2" x:Name="txtPassword" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<TextBlock x:Name="textBlock" Margin="10,0" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Center"/>
<TextBlock x:Name="textBlock_Copy" Margin="10,0" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Center"/>
<Button Grid.Column="1" Grid.Row="3" x:Name="btnSignin" Content="Login" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Grid.Column="1" Grid.Row="3" x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Right" VerticalAlignment="Top" />
<ProgressRing x:Name="progressring1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="87" Width="103"/>
<TextBlock x:Name="txtStatus" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
<Grid HorizontalAlignment="Left" Height="180" VerticalAlignment="Top" Width="496"/>
</Grid>
See Quickstart: Defining layouts and Adding layout controls on MSDN.
The above is a the right approach. Using a Grid Layout with auto as the row height or column width is a good approach because they automatically will scale with you. Depending on the difficulty of your project you can also use Adaptive Triggers. Here is a really intro example to using Adaptive Triggers, http://jamesqquick.com/windows-10-adaptive-triggers-intro/ . This way you can, for instance, make text bigger depending on the screen size.
You're doing good by testing all of the different sizes. This is important! I usually just run as a Windows 10 app and resize it in all directions!
I am new to windows phone 8 development and i have a very basic question i believe.
I wish to make my LongListSelector have 100% width and height but all the things i have tried didnt work.
I have tried Auto, * etc but nothing seems to do it.
Here is my code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock TextWrapping="Wrap" Text="{Binding Path=LocalizedResources.SetupsPageTitle, Source={StaticResource LocalizedStrings}}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector HorizontalAlignment="Left" Width="400" Height="400"
VerticalAlignment="Top"
Name="lstSetups" ItemsSource="{Binding BusRouteSetups}"
SelectionChanged="lstSetups_SelectionChanged"
LayoutMode="List">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="0,10,0,10" Background="Coral">
<TextBlock TextWrapping="Wrap" Margin="5" FontWeight="Bold" Text="{Binding Details.Title}" />
<TextBlock TextWrapping="Wrap" Margin="5" Text="{Binding Details.Description}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
Any help will be much appreciated.
Use HorizontalAlignment = Stretch (also Vertical), then Width and Height of LLS will be set to maximum space that is available to that Control:
<phone:LongListSelector HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Name="lstSetups" ItemsSource="{Binding BusRouteSetups}"
SelectionChanged="lstSetups_SelectionChanged"
LayoutMode="List">
Note that it's maximum height will be determined by Grid (parent of Control). While you have set RowDefinition's Height to * - it means that it will use all the remaining height of the screen (remaining - some space is used by first row (set to auto) - StackPanel with title).
HorizontalAlignment="Left" Width="400" Height="400" VerticalAlignment="Top"
Just remove this part of your code and then the control should be sretched automatically.
Then I tap on textbox happen to scroll through on-screen keyboard did not close this textbox. If this TextBox move above, how i make auto-scroll page by top too? I tryed use ScrollViewer, and use his methods InvalidateScrollInfo() and Scroll.UpdateLayout() but page not moving. This xaml from my page:
<ScrollViewer x:Name="Scroll">
<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">
<Canvas>
<TextBox x:Name="SearchTB" Width="200" Height="72" TextChanged="TextBox_OnTextChanged" Canvas.Left="112" Canvas.Top="297"/>
</Canvas>
</Grid>
</Grid>
</ScrollViewer>
You should call ScrollToVerticalOffset on the parent ScrollViewer, with a parameter of 0 to scroll to the top.
I am having trouble getting my long list selector to work properly. When the list is taller than the screen, the long list selector stays static and I am unable to scroll to see all of the items.
Any thoughts?
<phone:PivotItem Header="{Binding Path=LocalizedResources.ApplicationsHeader, Source={StaticResource LocalizedStrings}}" x:Name="applicationsPivotItem">
<Grid x:Name="applications" Grid.Row="1">
<phone:LongListSelector x:Name="MainLongListSelector" ItemsSource="{Binding Items}" SelectionChanged="MainLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</phone:PivotItem>
Fix the Height of the Grid
<Grid x:Name="applications" Grid.Row="1" Height="400">
...long list code...
</Grid>
I had a similar issue where my panoramaItem was defines as below:
<phone:PanoramaItem>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<phone:LongListSelector x:Name="SpeciesList" Grid.Row="0">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,-6,0,12">
<TextBlock Text="{Binding PrimaryName}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</phone:PanoramaItem>
By changing the RowDefinition to use * instead of Auto, my scrolling issues was resolved! As shown below.
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
I had the same issue with the LongListSelector not scrolling. In the end it was OpacityMask="White" that was set in LongListSelector that was causing the issue as per this question
Also as per Mattias I didn't have to set a specific Height, as long as the grid RowDefinition was set to *.