Examples: XAML code and the resulting layouts on a tab

Suppose you are creating a custom data skin for hydrant data, and you want to lay out a portion of your data as seen below.

To create this layout on the tab in FH Mobile Response, the XAML code would be:

<!--Hydrant Info-->
<StackPanel >

  <Grid>
    <Control Style="{StaticResource GlassyBorder}"/>
    <TextBlock Margin="12, 8, 0, 8" VerticalAlignment="Center" FontSize="14"
       Foreground="White">
         Hydrant Info
    </TextBlock>
  </Grid>

  <Grid Margin="24, 8, 0, 0" >
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto" MaxWidth="400"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>

  <TextBlock Foreground="DimGray" Grid.Row="1" Margin="0, 14, 0, 0"
    VerticalAlignment="Top">
    Class
  </TextBlock>
  <dsc:DSTextBlock Grid.Row="1" Grid.Column="1" KeysCSV="class_desc"
    DataClass="{Binding}" Margin="16, 14, 0, 0" TextWrapping="WrapWithOverflow"/>
  <dsc:DSTextBlock Grid.Row="1" Grid.Column="2" KeysCSV="class"
    DataClass="{Binding}" Margin="16, 14, 0, 0"/>

  <TextBlock Foreground="DimGray" Grid.Row="2" Margin="0, 14, 0, 0">
    Main Type
  </TextBlock>
  <dsc:DSTextBlock Grid.Row="2" Grid.Column="1" KeysCSV="main_type_desc"
    DataClass="{Binding}" Margin="16, 14, 0, 0" TextWrapping="WrapWithOverflow"/>
  <dsc:DSTextBlock Grid.Row="2" Grid.Column="2" KeysCSV="main_type"
    DataClass="{Binding}" Margin="16, 14, 0, 0"/>

  <TextBlock Foreground="DimGray" Grid.Row="3" Margin="0, 14, 0, 0">
    Last Flow Test Date
  </TextBlock>
  <dsc:DSTextBlock Grid.Row="3" Grid.Column="1" KeysCSV="last_flow_date"
    DataClass="{Binding}" Margin="16, 14, 0, 0" TextWrapping="WrapWithOverflow"/>

  <TextBlock Foreground="DimGray" Grid.Row="4" Margin="0, 14, 0, 0">
    Last Flow Test Result
  </TextBlock>
  <dsc:DSTextBlock Grid.Row="4" Grid.Column="1" KeysCSV="last_flow_gpm"
    DataClass="{Binding}" Margin="16, 14, 0, 0" TextWrapping="WrapWithOverflow"/>

  <TextBlock Foreground="DimGray" Grid.Row="5" Margin="0, 14, 0, 0">
    Last Flow Test Result @ 0 PSI
  </TextBlock>
  <dsc:DSTextBlock Grid.Row="5" Grid.Column="1" KeysCSV="last_flow_gpm_0"
    DataClass="{Binding}" Margin="16, 14, 0, 0" TextWrapping="WrapWithOverflow"/>

  <TextBlock Foreground="DimGray" Grid.Row="6" Margin="0, 14, 0, 0">
    Last Flow Test Result @ 10 PSI
  </TextBlock>
  <dsc:DSTextBlock Grid.Row="6" Grid.Column="1" KeysCSV="last_flow_gpm_10"
    DataClass="{Binding}" Margin="16, 14, 0, 0" TextWrapping="WrapWithOverflow"/>

  <TextBlock Foreground="DimGray" Grid.Row="7" Margin="0, 14, 0, 0">
    Last Flow Test Result @ 20 PSI
  </TextBlock>
  <dsc:DSTextBlock Grid.Row="7" Grid.Column="1" KeysCSV="last_flow_gpm_20"
    DataClass="{Binding}" Margin="16, 14, 0, 0" TextWrapping="WrapWithOverflow"/>

  </Grid>

</StackPanel>

 

You could also lay out a portion of your data as seen below.

To create this layout on the tab in FH Mobile Response, the XAML code would be:

<!--Flow Tests-->
<StackPanel Visibility="{Binding FDC_NamedLists[HydrantActivities],
    Converter={StaticResource CollectionCountToVisibility}}">
  <Grid Margin="0, 24, 0, 24">
    <Control Style="{StaticResource GlassyBorder}"/>
      <TextBlock Margin="12, 8, 0, 8" VerticalAlignment="Center" FontSize="14"
        Foreground="White">
          Flow Tests
      </TextBlock>
  </Grid>

  <!--List of Flow Tests-->
  <Border Margin="12, 0, 12, 0" Background="White" BorderThickness="1"
     BorderBrush="#bbbbbb" BitmapEffect="{StaticResource DropShadowBitmapEffect}">
    <ItemsControl ItemsSource="{Binding FDC_NamedLists[HydrantActivities]}">
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <Border Style="{StaticResource ItemBorderStyle}"
             Visibility="{Binding FDC_Values[flowtest].Value,
             Converter={StaticResource CountToVisibility}}">
          <StackPanel Margin="16, 12, 8, 12">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel>
              <!--Service Description-->
              <dsc:DSTextBlock KeysCSV="actv_desc" FontSize="14" DataClass="{Binding}"/>

              <!--GPM Tests-->
              <Grid Margin="4">
                <Grid.RowDefinitions>
                  <RowDefinition/>
                  <RowDefinition/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBlock Foreground="SteelBlue" Margin="12, 0, 0, 0">
                    GPM
                </TextBlock>
                <dsc:DSTextBlock Margin="12, 0, 0, 0" Grid.Row="1" KeysCSV="hydr_gpm"
                  DataClass="{Binding}"/>

                <TextBlock Foreground="SteelBlue" Margin="12, 0, 0, 0" Grid.Column="1">
                    @ 20 PSI
                </TextBlock>
                <dsc:DSTextBlock Margin="12, 0, 0, 0" Grid.Row="1" Grid.Column="1"
                  KeysCSV="gpm_20" DataClass="{Binding}"/>

                <TextBlock Foreground="SteelBlue" Margin="12, 0, 0, 0" Grid.Column="2">
                   @ 10 PSI
                </TextBlock>
                <dsc:DSTextBlock Margin="12, 0, 0, 0" Grid.Row="1" Grid.Column="2"
                  KeysCSV="gpm_10" DataClass="{Binding}"/>

                <TextBlock Foreground="SteelBlue" Margin="12, 0, 0, 0" Grid.Column="3">
                   @ 0 PSI
                </TextBlock>
                <dsc:DSTextBlock Margin="12, 0, 0, 0" Grid.Row="1" Grid.Column="3"
                   KeysCSV="gpm_0" DataClass="{Binding}"/>
            </Grid>

              <!--Defects-->
              <dsc:DSTextBlock Margin="12, 4, 0, 0" KeysCSV="defect_cnt"
                 Foreground="DarkRed" DisplayFormat="StringFormat"
                 StringFormat="{}{0} Defects Found" DataClass="{Binding}"/>

              <!--Defects List-->
              <ItemsControl ItemsSource="{Binding FDC_NamedLists[HydrantDefects]}"
                  Margin="24, 8, 0, 0">
                <ItemsControl.ItemTemplate>
                  <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="0, 4, 8, 4">
                      <Image Source="bullet_ball_red.png" Width="16" Height="16" />
                      <dsc:DSTextBlock Margin="8, 0, 0, 0" KeysCSV="defect_desc"
                         DataClass="{Binding}" TextWrapping="WrapWithOverflow"/>
                      <dsc:DSBooleanTextBlock KeysCSV="repaired" TrueString=" (Repaired)"
                         FalseString=" (Not Repaired)" DataClass="{Binding}"/>
                    </StackPanel>
                  </DataTemplate>
                </ItemsControl.ItemTemplate>
              </ItemsControl>

            </StackPanel>

            <!--Date and Name-->
            <StackPanel Grid.Column="1">
              <dsc:DSTextBlock HorizontalAlignment="Right" KeysCSV="date"
                DisplayFormat="StringFormat" StringFormat="{}{0:d}" DataClass="{Binding}"/>
              <dsc:DSTextBlock HorizontalAlignment="Right" KeysCSV="staff_name"
                DataClass="{Binding}"/>
            </StackPanel>

          </Grid>
          </StackPanel>
          </Border>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
  </Border>
</StackPanel>