I have a TextBlock inside a ScrollViewer which resides inside a HubSection. "Summary" binding has a long text so I want it to wrap at the end of the line but it doesn't wrap and the HubSection stretches as wide as the text inside TextBlock. I have tried to set the HorizontalScrollMode to disabled without any success. I also tried putting the TextBlock inside the grid instead of outside it such that it wraps the summary TextBlock. Again this didn't solve my problem.
I can give a width to HubSection but I want my application to work in different resolutions without a problem so I don't want to do that.
I have been trying to find an answer to this problem without any success.
Thanks for your answers in advance.
<HubSection x:Uid="MyHubSection" Header="{Binding Path=DisplayName}" Width="Auto" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid x:Name="MyGrid" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="40" />
<RowDefinition Height="Auto" MinHeight="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text ="{Binding Path=Summary}" TextWrapping="Wrap" />
<TextBlock Grid.Row="1" TextWrapping="Wrap">
<Run Text="Last Edit Date " />
<Run Text="{Binding Path=LastEditDate}" />
</TextBlock>
</Grid>
</ScrollViewer>
</DataTemplate>
</HubSection>
Related
I have a pretty simple page with a header, a footer, and scrollable content. My iOS and UWP app seems to work fine. When I enter the page iOS and UWP starts with the ScrollView Scrolled at the top, but Android seems to scroll down until you can see at least one button.
My page looks something like this (Header, big scrollable content and footer):
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Height="64"
Background="Blue">
<TextBlock Text="Header"
Margin="20" />
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
<Grid Height="44"
Background="Green"
Grid.Row="2">
<TextBlock Text="Footer"
Margin="10" />
</Grid>
</Grid>
This arises from an interaction between the native Android scroll viewer (which is implicitly nested inside the Xaml ScrollViewer), which tries to scroll elements into view when they receive focus, and the Button, which takes focus when the Page first loads.
As a workaround to disable this behavior, you can use the BringIntoViewOnFocusChange property:
<ScrollViewer Grid.Row="1"
BringIntoViewOnFocusChange="False">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
I'm writing a UWP app and have several areas where searches are performed and results are rendered in a ListView where the ItemTemplate is defined inside a DataTemplate. Nothing fancy is going on here - just returns a list of items in a single "column", if you will.
There are three supported screen states (or widths), 320, 640, and 1024. I'd like to render these search results in two "columns" when the screen state is 640 or 1024 (wide states).
I'd like to use adaptive triggers for this task, but I'm at a loss of how to do this intelligently. There are examples of creating different views for each device family, but they seem too dependent on checking the device family. Best practices dictate using screen width thresholds instead. Either way, it seems this could easily be accomplished using adaptive triggers.
Any insight or examples of where this is done would be appreciated. The code is included to provide more context and to act as my starting point.
<Page.Resources>
<ResourceDictionary>
<Style x:Key="TextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource LargeTextBlockStyle}">
<Setter Property="Foreground" Value="{StaticResource TitleBrush}" />
</Style>
<DataTemplate x:Key="SearchResult">
<StackPanel Width="{Binding ActualWidth, ElementName=Parent}">
<Border Background="Gray" MinWidth="235">
<Grid Height="155">
<Image Source="{Binding SearchResultImage}"
Style="{StaticResource ImageStyle}" />
<Rectangle Fill="{StaticResource BackgroundBrush}" />
<StackPanel Margin="10,10,15,10" VerticalAlignment="Center">
<TextBlock Text="{Binding SearchResultName}"
Style="{StaticResource TextBlockStyle}"
VerticalAlignment="Center" />
</StackPanel>
</Grid>
</Border>
<Button Style="{StaticResource ButtonStyle}"
Command="{Binding ViewRecipeCommand, Source={StaticResource Locator}}"
CommandParameter="{Binding}">
<StackPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Center">
<SymbolIcon Symbol="Calendar" Margin="0,0,10,0" />
<TextBlock x:Uid="ViewRecipeCommandTextBlock"
Text="View Recipe"
Style="{StaticResource TextBlockStyle}" />
</StackPanel>
</Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="HeaderStackPanel" Grid.Row="0" Margin="10">
<TextBlock x:Uid="RecipesTitle" Text="All Recipes"
Style="{StaticResource TextBlockStyle}"
Margin="0,0,0,10" />
</StackPanel>
<ListView x:Name="ResultsListView" Grid.Row="2"
ItemsSource="{Binding AllRecipes}"
ItemTemplate="{StaticResource SearchResult}" />
</Grid>
What I'd do to use a GridView instead a ListView, and change the GridView's ItemsPanel based on the width changes.
By using a GridView with an item width as wide as the screen size (320) you can get it to behave like a ListView, and if the GridView get's wider the content will automatically produce two columns for you. The only thing not to forget is to change the default scrolling direction of the ItemsPanel from horizontal to vertical.
I have a ListView in PivotItem and my pivot contains 3 pivot items. Each Piovt Item contain ListView. I want to disable scrolling on all the ListViews while user changing the Pivot Item swiping left/right. Currently while swiping left/right the pivot item is in changing mode and also my ListView scrolls. I have tried ManipulationStarted and ManipulationCompleted events but it is not working? Is there a way to achieve this? What I want is the same behavior of WP 8.1 email app, while swiping left/right it disables listview view scrolling.
<Pivot Grid.Row="1">
<PivotItem Margin="0" >
<PivotItem.Header>
<TextBlock Text="web" />
</PivotItem.Header>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="19,0,19,15"
Style="{StaticResource PhoneAccentTextSmallStyle}"
Visibility="{Binding CountryFacetCurrentlyShowing,Converter={StaticResource empltyStringToVisibilityConverter}}"
Text="{Binding CountryFacetCurrentlyShowing}"></TextBlock>
<!-- Search List Items -->
<ListView Grid.Row="2" x:Name="grdSearchResults" Width="{Binding ElementName=searchView,Path=ActualWidth}" ItemsSource="{Binding SearchedMembers}"
Visibility="{Binding ElementName=btnGridView,Path=IsEnabled,Converter={StaticResource boolToVisibiliytConverter}}"
LayoutUpdated="grdSearchResults_LayoutUpdated"
SelectedItem="{Binding SelectedMember,Mode=TwoWay}"
SelectionMode="{Binding ListViewMode}"
ItemTemplate="{Binding ItemTemplate}"
ItemContainerStyle="{StaticResource ListViewItemStyle99}">
</ListView>
<!-- Search Grid Items -->
<GridView Grid.Row="2" x:Name="grdSearchResults1" Width="{Binding ElementName=searchView,Path=ActualWidth}" ItemsSource="{Binding SearchedMembers}"
Visibility="{Binding ElementName=btnListView,Path=IsEnabled,Converter={StaticResource boolToVisibiliytConverter}}"
Margin="13,0,13,0" SelectedItem="{Binding SelectedMember,Mode=TwoWay}"
LayoutUpdated="grdSearchResults_LayoutUpdated"
SelectionMode="{Binding ListViewMode}"
ItemContainerStyle="{StaticResource GridViewItemStyle99}"
ItemTemplate="{StaticResource SearchGridItemDataTemplate}">
<!--<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="{Binding DataContext.ItemWidth, Mode=OneWay, ElementName=searchView}"></Setter>
</Style>
</GridView.ItemContainerStyle>-->
</GridView>
<TextBlock Margin="19,10" Text="No matches found." FontSize="16" x:Name="lblNoConten" Foreground="DarkGray" Visibility="{Binding NoContentVisibility}"></TextBlock>
</Grid>
</PivotItem>
<PivotItem Margin="0">
<PivotItem.Header>
<TextBlock Text="local" />
</PivotItem.Header>
</PivotItem>
</Pivot>
Fixed this problem. I was using a default ListView style(which contains nothing new) in my resources and that was causing the problem after removing default style from my resources it works :). Do not know why it was causing the issue.
I have created a Windows Store App with the default Hub Project, and on the first hubsection, I have an image as the background. I want to position some text at the bottom of the image to describe what the image is. However I am having trouble position the text inside the Hubsection.contenttemplate.
As you will be able to see from the code I have tried several things including trying to set the vertical alignment of both the grid and the individual text blocks, but neither seems to be working for me.
The code I currently have can be found below.
<HubSection Width="780">
<HubSection.Background>
<ImageBrush ImageSource="Assets/Images/example_meal.png" Stretch="UniformToFill" />
</HubSection.Background>
<HubSection.ContentTemplate>
<DataTemplate>
<Grid Margin="80,0,0,0" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Bottom" x:Name="pageTitle" Text="Primary Text" Style="{StaticResource TitleTextStyle}"
TextWrapping="NoWrap" FontSize="30" Margin="0,0,0,0" />
<TextBlock Grid.Row="1" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}" Text="Secondary Text" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</HubSection.ContentTemplate>
</HubSection>
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