Difference between revisions of "Databinding"

From truxwiki.com
Jump to navigation Jump to search
(Created page with "This page documents the Navigation/Routing of the application, or how each "page" is navigated. This document is intended to detail the initial resources that are used when th...")
 
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
This page documents the Navigation/Routing of the application, or how each "page" is navigated. This document is intended to detail the initial resources that are used when the application loads each page or view.
+
This page documents the Databinding of the application, or how each "view" has the data loaded behind the scenes. This document is intended to detail the references and flow of the data used in the UI.
  
 
== UI Guide Menu ==
 
== UI Guide Menu ==
Line 6: Line 6:
 
:# [[ Navigation and Routing ]]
 
:# [[ Navigation and Routing ]]
 
:# [[ Databinding ]]
 
:# [[ Databinding ]]
 +
:# [[ Dependency Injection ]]
 +
:# [[ Task Bar Icon ]]
 +
:# [[ Truxton CLI options ]]
 +
:# [[ How Reports are Displayed ]]
 +
:# [[ How Dialog Forms Work ]]
 +
:# [[ Forms with Images ]]
 +
:# [[ Images ]]
 +
:# [[ Bookmarks ]]
  
−
== Main Files ==
+
== Databinding ==
  
−
::{| class="wikitable"
+
::There are multiple ways to bind data. I'll describe the most complex and most used ones below.
−
! File
+
 
−
! Summary
+
=== d:DataContext ===
−
! Path
+
::Some XAMLs will have references using the <b>d:DataContext</b> tag. This is more of a developer's note. It does not actually bind anything. It's useful to let the developer know where to look. If a xaml doesn't have one, it's probably loaded in through BindingProxy. That is not always the case.
 +
<div style="display:flex;justify-content:center;"> 
 +
  <Grid x:Class="TruxtonClient.Views.Dashboard"
 +
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 +
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 +
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 +
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 +
      xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
 +
      xmlns:controls="clr-namespace:TruxtonClient.Controls;assembly="
 +
      xmlns:uicore="clr-namespace:Truxton;assembly=Truxton.UI.Core"
 +
      xmlns:converters="clr-namespace:TruxtonClient.Converters;assembly="
 +
      xmlns:behaviors="clr-namespace:TruxtonClient.Behaviors;assembly="
 +
      xmlns:local="clr-namespace:TruxtonClient;assembly="
 +
      xmlns:models="clr-namespace:TruxtonClient.Models;assembly="
 +
      xmlns:MahAppsControls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
 +
      xmlns:viewModels="clr-namespace:TruxtonClient.ViewModels;assembly="
 +
      xmlns:ig="http://schemas.infragistics.com/xaml"
 +
      xmlns:vm="clr-namespace:TruxtonClient.ViewModels"
 +
      <b>d:DataContext="{d:DesignInstance Type=vm:DashboardViewModel}"</b>
 +
      mc:Ignorable="d"
 +
      d:DesignHeight="600"
 +
      d:DesignWidth="800"
 +
      Background="White">
 +
</div>
 +
 
 +
=== BindingProxy ===
 +
::BindingProxy is a tool used to reference a specific Databinding source elsewhere in the code where it may not be readily available. For example, a template resource can be used in multiple Views. The BindingProxy can be used to pass a specific View's DataContext into the template instance.
 +
 
 +
<div style="display:flex;justify-content:center;"> 
 +
{| class="wikitable"
 +
! Example
 
|-
 
|-
−
| PageManager.cs
+
| Views/Home/Home.xaml
−
| This class manages the navigation tools such as : page loading, the bread crumbs, last page loaded,
+
  <Grid x:Class="TruxtonClient.Views.Home"
−
| \Truxton\Client\TruxtonClient\TruxtonClient\PresentationCore\PageManager.cs
+
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 +
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 +
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 +
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 +
      mc:Ignorable="d"
 +
      d:DesignHeight="300"
 +
      d:DesignWidth="600"
 +
      Background="White"
 +
      xmlns:vm="clr-namespace:TruxtonClient.ViewModels"
 +
      <b>d:DataContext="{d:DesignInstance Type=vm:HomeViewModel}"></b>
 +
    <DockPanel SnapsToDevicePixels="True">
 +
        <!-- left side nav -->
 +
        <b><ContentControl Content="{Binding Navigation}"
 +
                        ContentTemplate="{StaticResource LeftSideNav}" /></b>
 +
       
 +
        <!-- right side content-->
 +
        <Grid Name="ChildContainer" />
 +
    </DockPanel>
 +
  </Grid>
 
|-
 
|-
−
| HomeViewModel.cs
+
| TruxtonClient/Templates/LeftSideNav.xaml ~Line 453
−
| Adds the NavItems to the Main Menu
+
  <DataTemplate x:Key="LeftSideNav">
−
| \Truxton\Client\TruxtonClient\TruxtonClient\ViewModels\HomeViewModel.cs
+
  <Border Style="{StaticResource LeftSidePanel}">
 +
      <Border.Resources>
 +
          <b><uicore:BindingProxy x:Key="BindingProxy"
 +
                                  Data="{Binding}" /></b>
 +
          <DataTemplate x:Key="LeftSideNavListItem">
 +
              <Button Style="{StaticResource SideNavButton}"
 +
                      <b>Command="{Binding Data.Select,
 +
                          Source={StaticResource BindingProxy}}"</b>
 +
                      CommandParameter="{Binding}"
 +
                      Tag="{Binding Name}"
 +
                      ToolTip="{Binding ToolTip}">
 
|-
 
|-
 
|}
 
|}
 +
</div>
 +
 +
:::In the example above, the Home View loads the LeftSideNav template and passes its DataContext of Navigation to the LeftSideNav template.

Latest revision as of 11:28, 30 November 2021

This page documents the Databinding of the application, or how each "view" has the data loaded behind the scenes. This document is intended to detail the references and flow of the data used in the UI.

UI Guide Menu

  1. Entry Point
  2. Navigation and Routing
  3. Databinding
  4. Dependency Injection
  5. Task Bar Icon
  6. Truxton CLI options
  7. How Reports are Displayed
  8. How Dialog Forms Work
  9. Forms with Images
  10. Images
  11. Bookmarks

Databinding

There are multiple ways to bind data. I'll describe the most complex and most used ones below.

d:DataContext

Some XAMLs will have references using the d:DataContext tag. This is more of a developer's note. It does not actually bind anything. It's useful to let the developer know where to look. If a xaml doesn't have one, it's probably loaded in through BindingProxy. That is not always the case.
  <Grid x:Class="TruxtonClient.Views.Dashboard"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
     xmlns:controls="clr-namespace:TruxtonClient.Controls;assembly="
     xmlns:uicore="clr-namespace:Truxton;assembly=Truxton.UI.Core"
     xmlns:converters="clr-namespace:TruxtonClient.Converters;assembly="
     xmlns:behaviors="clr-namespace:TruxtonClient.Behaviors;assembly="
     xmlns:local="clr-namespace:TruxtonClient;assembly="
     xmlns:models="clr-namespace:TruxtonClient.Models;assembly="
     xmlns:MahAppsControls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
     xmlns:viewModels="clr-namespace:TruxtonClient.ViewModels;assembly="
     xmlns:ig="http://schemas.infragistics.com/xaml"
     xmlns:vm="clr-namespace:TruxtonClient.ViewModels"
     d:DataContext="{d:DesignInstance Type=vm:DashboardViewModel}"
     mc:Ignorable="d"
     d:DesignHeight="600"
     d:DesignWidth="800"
     Background="White">

BindingProxy

BindingProxy is a tool used to reference a specific Databinding source elsewhere in the code where it may not be readily available. For example, a template resource can be used in multiple Views. The BindingProxy can be used to pass a specific View's DataContext into the template instance.
Example
Views/Home/Home.xaml 
  <Grid x:Class="TruxtonClient.Views.Home"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     mc:Ignorable="d"
     d:DesignHeight="300"
     d:DesignWidth="600"
     Background="White"
     xmlns:vm="clr-namespace:TruxtonClient.ViewModels"
     d:DataContext="{d:DesignInstance Type=vm:HomeViewModel}">
   <DockPanel SnapsToDevicePixels="True">
       <ContentControl Content="{Binding Navigation}"
                       ContentTemplate="{StaticResource LeftSideNav}" />
       
       <Grid Name="ChildContainer" />
   </DockPanel>
  </Grid>
TruxtonClient/Templates/LeftSideNav.xaml ~Line 453 
  <DataTemplate x:Key="LeftSideNav">
  <Border Style="{StaticResource LeftSidePanel}">
      <Border.Resources>
          <uicore:BindingProxy x:Key="BindingProxy"
                                 Data="{Binding}" />
          <DataTemplate x:Key="LeftSideNavListItem">
              <Button Style="{StaticResource SideNavButton}"
                      Command="{Binding Data.Select, 
                          Source={StaticResource BindingProxy}}"
                      CommandParameter="{Binding}"
                      Tag="{Binding Name}"
                      ToolTip="{Binding ToolTip}">
In the example above, the Home View loads the LeftSideNav template and passes its DataContext of Navigation to the LeftSideNav template.
Retrieved from "https://truxwiki.com/index.php?title=Databinding&oldid=5394"