Search code examples
c#xamlwindows-store-apps

Hub App: Windows 8.1 - Referencing text in Section 1


I am having a hard time understanding the actual source of the Text property in TextBlocks in XAML below from sample Hub App from VS 2015 for Windows 8.1

<Page
    x:Name="pageRoot"
    x:Class="App2.HubPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:data="using:App2.Data"
    xmlns:common="using:App2.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Hub SectionHeaderClick="Hub_SectionHeaderClick">
            <HubSection Width="500" x:Uid="Section1Header" Header="Section 1">
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Image Source="Assets/MediumGray.png" Stretch="Fill" Width="420" Height="280"/>
                        <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"  
                                   x:Uid="Section1Subtitle" Text="{StaticResource AppName}"/>
                        <TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Margin="0,10,0,0" 
                                   x:Uid="DescriptionHeader" Text="Description text:"/>
                        <TextBlock Style="{StaticResource BodyTextBlockStyle}" Grid.Row="3"
                                   x:Uid="Section1DescriptionText" Text="Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. Lorem ipsum dolor sit amet, consectetuer ising elit, sed diam nonummy nibh uismod tincidunt ut laoreet suscipit lobortis ni ut wisi quipexerci quis consequat minim veniam, quis nostrud exerci tation ullam corper. "/>
                    </Grid>
                </DataTemplate>
            </HubSection>

Now, what I'm curious about is. If I edit Text Property in any of the TextBlocks and I run the application it will be replaced with the value that was previously there. So if i do the following:

<TextBlock Style="{StaticResource TitleTextBlockStyle}" Grid.Row="2" Margin="0,10,0,0" 
                                   x:Uid="DescriptionHeader" Text="zzz TEST zzz:"/>

It will get back to the whatver value there was previously before execution. It's not bound to .json file in SampleDataSource.json. The only connection I can see is Resources.resw file which contains the entries corresponding to x:Uid e.g. `x:Uid="Section1Subtitle". How are these resources fetched and connected via x:Uid? Because I suppose that's what happens when the app is executed?


Solution

  • >>How are these resources fetched and connected via x:Uid?

    Because you have Resources.resw file in you application, you could find this file to see if you have set DescriptionHeader.Text and Description.Width. Just like the Screenshot provided below.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
        <TextBlock x:Uid="DescriptionHeader" Width="400" Height="100" Text="Cherry"></TextBlock>
    

    enter image description here

    Although I set the Textblock.Text=Cherry in XAML, I use the x:Uid=DescriptionHeader property and I have set DescriptionHeader.Text=Hello in the Resource.resw, so when I run the application , the Textblock.Text=Hello.

    You could associate every control that needs localized text with the .resw file. You could do this using the x:Uid attribute on your XAML elements. For the resource name, you could give the Uid attribute value, plus you specify what property is to get the translated string. You could specify other properties/values for different languages such as Greeting.Width, but be careful with such layout-related properties. You should strive to allow the controls to lay out dynamically based on the device's screen.

    About the x:Uid detailed information, you could refer to Using string resources(XAML)