Jump to: navigation, search

Difference between revisions of "XAML"

(→‎Advanced)
(→‎Converters)
Line 50: Line 50:
 
Example:
 
Example:
 
<source lang = "xml">
 
<source lang = "xml">
−
        <StackPanel Orientation="Horizontal">
+
    <StackPanel Orientation="Horizontal">
−
            <StackPanel.Resources>
+
        <StackPanel.Resources>
−
                <!--  Instantiate the converter and bind the the Param0 to a SearchBox on this page  -->
+
            <!--  Instantiate the converter and bind the the Param0 to a SearchBox on this page  -->
−
                <converters:StringFormatConverter x:Key="URIConverter" Param0="{Binding ElementName=SkypeQuery, Path=QueryText}" />
+
            <converters:StringFormatConverter x:Key="URIConverter" Param0="{Binding ElementName=SkypeQuery, Path=QueryText}" />
−
            </StackPanel.Resources>
+
        </StackPanel.Resources>
−
            <!--  Create a SearchBox that calls the typed Name via Skype on enter  -->
+
        <!--  Create a SearchBox that calls the typed Name via Skype on enter  -->
−
            <SearchBox
+
        <SearchBox
−
                x:Name="SkypeQuery"
+
            x:Name="SkypeQuery"
−
                Width="240" Height="40"
+
            Width="240" Height="40"
−
                FontSize="18"
+
            FontSize="18"
−
                PlaceholderText="Call Skype">
+
            PlaceholderText="Call Skype">
−
                <Interactivity:Interaction.Behaviors>
+
            <Interactivity:Interaction.Behaviors>
−
                    <Core:EventTriggerBehavior EventName="QuerySubmitted">
+
                <Core:EventTriggerBehavior EventName="QuerySubmitted">
−
                        <Core:InvokeCommandAction
+
                    <Core:InvokeCommandAction
−
                              Command="{Binding NavigateToURICommand}"
+
                          Command="{Binding NavigateToURICommand}"
−
                              CommandParameter="{Binding ElementName=EcoQuery, Path=QueryText, Converter={StaticResource URIConverter},
+
                          CommandParameter="{Binding ElementName=EcoQuery, Path=QueryText, Converter={StaticResource URIConverter},
−
                              ConverterParameter=skype:\{0\}\?call }" />
+
                          ConverterParameter=skype:\{0\}\?call }" />
−
                    </Core:EventTriggerBehavior>
+
                </Core:EventTriggerBehavior>
−
                </Interactivity:Interaction.Behaviors>
+
            </Interactivity:Interaction.Behaviors>
−
            </SearchBox>
+
        </SearchBox>
−
        </StackPanel>
+
    </StackPanel>
 
</source>
 
</source>
 +
  
 
* [[EvalExpressionConverter]]
 
* [[EvalExpressionConverter]]
Line 78: Line 79:
 
Example:
 
Example:
 
<source lang = "xml">
 
<source lang = "xml">
−
            <Grid>
+
    <Grid>
−
                <Grid.Resources>
+
        <Grid.Resources>
−
                    <!--  Instantiate the converter and bind the Context to the current DataContext, the Param0 to a UI element of this page  -->
+
            <!--  Instantiate the converter and bind the Context to the current DataContext, the Param0 to a UI element of this page  -->
−
                    <converters:EvalExpressionConverter x:Key="CodeConverter" Context="{Binding}" Param0="{Binding ElementName=ChildListView, Path=Name}" />
+
            <converters:EvalExpressionConverter x:Key="CodeConverter" Context="{Binding}" Param0="{Binding ElementName=ChildListView, Path=Name}" />
−
                </Grid.Resources>
+
        </Grid.Resources>
−
                <StackPanel Orientation="Horizontal">
+
        <StackPanel Orientation="Horizontal">
−
                    <!--  Create a TextBox where we can enter a C# expression  -->
+
            <!--  Create a TextBox where we can enter a C# expression  -->
−
                    <TextBox
+
            <TextBox
−
                        x:Name="CodeQuery"
+
                x:Name="CodeQuery"
−
                        MinWidth="240" Height="40"
+
                MinWidth="240" Height="40"
−
                        Margin="0,10,10,0" HorizontalAlignment="Right"
+
                FontSize="18"
−
                        VerticalAlignment="Top"
+
                PlaceholderText="Expression">
−
                        FontSize="18"
+
            </TextBox>
−
                        PlaceholderText="Expression">
+
            <!--  Create a TextBlock where we display the result of the compiled expression -->
−
                    </TextBox>
+
            <TextBlock Text="{Binding ElementName=CodeQuery, Path=Text, Converter={StaticResource CodeConverter}}" />
−
                    <!--  Create a TextBlock where we display the result of the compiled expression -->
+
        </StackPanel>
−
                    <TextBlock Text="{Binding ElementName=CodeQuery, Path=Text, Converter={StaticResource CodeConverter}}" />
+
    </Grid>
−
                </StackPanel>
+
−
            </Grid>
+
 
</source>
 
</source>
  

Revision as of 10:51, 25 August 2016

The WinX User Interface can be vastly customized using XAML.

Templates

The UI is controlled by several predefined XAML templates which are loaded into the App at startup. There is a set of default template deployed with the App at installation, however, each of them can be overridden by placing the respective file in the folder [AppInstallPath\LocalState\XAML

General

  • UBIKThemes.xaml

Controls the overall styling and behavior of the App, like standard Brushes (Colors) and Fonts.

AuthenticationPage

  • UBIKSplashArea.xaml
  • UBIKPageNavigation.xaml

Content Pages

  • UBIKObjectIcon.xaml
  • UBIKObjectIconSmall.xaml


RootPage

  • UBIKMainLeftArea.xaml
  • UBIKMainItem.xaml
  • UBIKMainItemSmall.xaml

ChildPage

  • UBIKChildItem.xaml
  • UBIKChildItemSmall.xaml
  • UBIKChildAction.xaml
  • UBIKPriorityPropertyItem.xaml

DetailsPage

  • UBIKDocumentItem.xaml
  • UBIKDocumentItemSmall.xaml



Specific UBIK® Elements

Converters

Basic

  • BooleanToVisibilityConverter

Converts a Boolean into a Visibility, where true will result in Visibility.Visible.

  • BooleanToCollapsedConverter

Converts a Boolean into a Visibility, where true will result in Visibility.Collapsed.

Advanced

Returns a formatted string where placeholders will be filled with values supplied to its parameter properties (Param0, Param1, Param2).

Example:

    <StackPanel Orientation="Horizontal">
        <StackPanel.Resources>
            <!--  Instantiate the converter and bind the the Param0 to a SearchBox on this page  -->
            <converters:StringFormatConverter x:Key="URIConverter" Param0="{Binding ElementName=SkypeQuery, Path=QueryText}" />
        </StackPanel.Resources>
        <!--  Create a SearchBox that calls the typed Name via Skype on enter  -->
        <SearchBox
           x:Name="SkypeQuery"
           Width="240" Height="40"
           FontSize="18"
           PlaceholderText="Call Skype">
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="QuerySubmitted">
                    <Core:InvokeCommandAction
                         Command="{Binding NavigateToURICommand}"
                         CommandParameter="{Binding ElementName=EcoQuery, Path=QueryText, Converter={StaticResource URIConverter},
                         ConverterParameter=skype:\{0\}\?call }" />
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </SearchBox>
    </StackPanel>


Evaluates a C# expression with 3 optional variables (Param0, Param1, Param2) and returns the result.

Example:

    <Grid>
        <Grid.Resources>
            <!--  Instantiate the converter and bind the Context to the current DataContext, the Param0 to a UI element of this page  -->
            <converters:EvalExpressionConverter x:Key="CodeConverter" Context="{Binding}" Param0="{Binding ElementName=ChildListView, Path=Name}" />
        </Grid.Resources>
        <StackPanel Orientation="Horizontal">
            <!--  Create a TextBox where we can enter a C# expression  -->
            <TextBox
               x:Name="CodeQuery"
               MinWidth="240" Height="40"
               FontSize="18"
               PlaceholderText="Expression">
            </TextBox>
            <!--  Create a TextBlock where we display the result of the compiled expression -->
            <TextBlock Text="{Binding ElementName=CodeQuery, Path=Text, Converter={StaticResource CodeConverter}}" />
        </StackPanel>
    </Grid>


Behaviors

Commands

Retrieved from "https://wiki.augmensys.com/index.php?title=XAML&oldid=19647"