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>
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 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 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>
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
I have a Windows Phone 8 app using XAML/C#. My app has an ItemsControl that relies on a data template. My DataTemplate looks like the following:
<DataTemplate x:Key="myTemplate">
<Grid Margin="0,0,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding DisplayName}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" TextTrimming="WordEllipsis" >
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem x:Name="customerMenuItem" Foreground="White" Header="View Customer Profile" Click="customerMenuItem_Click" Tag="{Binding Path=CustomerName}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</TextBlock>
<TextBlock Text="{Binding Summary}" TextWrapping="NoWrap" Grid.Row="1" Style="{StaticResource PhoneTextSmallStyle}" />
</Grid>
<StackPanel Orientation="Horizontal" Grid.Column="1"><!-- Stuff here --></StackPanel>
</Grid>
</DataTemplate>
This DataTemplate is referenced in the main part of my XAML as shown here:
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.ColumnSpan="2" Margin="12,0,12,0">
<ScrollViewer>
<ItemsControl x:Name="myItemsControl" ItemTemplate="{StaticResource myTemplate}" ItemsSource="{Binding Customers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
Please note, the "toolkit" namespace comes from clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit. When I hold my finger (or mouse) on the TextBlock, a context menu appears. However, I never see the words "View Customer Profile". I just see a block box that represents the context menu itself. I know that the item is there though. I know because the customerMenuItem_Click event successfully fires. I have a MessageBox in there that shows the value of the Tag. That value is always correct. For some reason though the menu item text is not appearing. What am I doing wrong?
You put Foreground = "White". Context menu is on white background. That is why you don't see your menu item.