If-Then-Else – Conditional XAML Sample

In this article you can find some samples about the conditional Xaml.
The conditional Xaml tag describe here is not a preprocessor directive like « #if #else #endif ».
It’s more like an « if{} else{} » in C#

Installation

To install Conditional XAML, run the following command in the Package Manager Console
PM> Install-Package ConditionalXAML

Namespace

In your xaml page you must include a namespace for the library downloaded from Nuget.

<Page
    ...
    xmlns:sb="using:SamuelBlanchard.Controls.Statements"
    ...
>

basic sample

<StackPanel>
    <ToggleSwitch x:Name="Checkbox" IsOn="True"></ToggleSwitch>

    <sb:Statement FontSize="30">
        <sb:If Then="Bonjour" Else="Au revoir">
            <sb:BooleanCondition Value1="{Binding ElementName=Checkbox, Path=IsOn}" Operator="Equal" Value2="True"></sb:BooleanCondition>
        </sb:If>
    </sb:Statement>
</StackPanel>

conditions

<StackPanel>
    <ToggleSwitch x:Name="CheckboxConditions" IsOn="True"></ToggleSwitch>
    <Slider x:Name="SliderConditions" Value="50"></Slider>
    <TextBox x:Name="TextBoxName" Text="Samuel"></TextBox>
    <DatePicker x:Name="DatePickerConditions1"></DatePicker>
    <DatePicker x:Name="DatePickerConditions2"></DatePicker>

    <sb:Statement FontSize="30">
        <sb:If Then="Bonjour" Else="Au revoir">
            <sb:BooleanCondition Value1="{Binding ElementName=CheckboxConditions, Path=IsOn}" Operator="Equal" Value2="True"></sb:BooleanCondition>
            <sb:DoubleCondition Value1="{Binding ElementName=SliderConditions, Path=Value}" Operator="Greater" Value2="60.0"></sb:DoubleCondition>
            <sb:StringCondition Value1="{Binding ElementName=TextBoxName, Path=Text}" IsCaseSensitive="False" Operator="StartsWith" Value2="Sam"></sb:StringCondition>
            <sb:DateTimeOffsetCondition Value1="{Binding ElementName=DatePickerConditions1,Path=Date}" Operator="Greater" Value2="{Binding 

ElementName=DatePickerConditions2,Path=Date}"></sb:DateTimeOffsetCondition>
        </sb:If>
    </sb:Statement>
</StackPanel>

Conditions (Bonus)

<StackPanel>
    <sb:Statement FontSize="30">
        <sb:If Then="Landscape" Else="Portrait">
            <sb:ScreenOrientationCondition Orientation="IsLandscape"/>
        </sb:If>
    </sb:Statement>
    <sb:Statement FontSize="30">
        <sb:If Then="Design" Else="RunTime">
            <sb:IsDesignerModeCondition/>
        </sb:If>
    </sb:Statement>
</StackPanel>

Logical operator

<StackPanel>
    <ToggleSwitch x:Name="CheckboxOp" IsOn="True"></ToggleSwitch>
    <Slider x:Name="SliderOp" Value="50"></Slider>
    <TextBox x:Name="TextBoxOp" Text="Samuel"></TextBox>
    <DatePicker x:Name="DatePickerOp1"></DatePicker>
    <DatePicker x:Name="DatePickerOp2"></DatePicker>

    <sb:Statement FontSize="30">
        <sb:If Then="Bonjour" Else="Au revoir">
            <sb:Or>
                <sb:Or.Conditions>
                    <sb:Not>
                        <sb:Not.Conditions>
                            <sb:BooleanCondition Value1="{Binding ElementName=CheckboxOp, Path=IsOn}" Operator="Equal" Value2="True"></sb:BooleanCondition>
                        </sb:Not.Conditions>
                    </sb:Not>
                    <sb:Xor>
                        <sb:Xor.Conditions>
                            <sb:DoubleCondition Value1="{Binding ElementName=SliderOp, Path=Value}" Operator="Greater" Value2="60.0"></sb:DoubleCondition>
                            <sb:StringCondition Value1="{Binding ElementName=TextBoxOp, Path=Text}" IsCaseSensitive="False" Operator="StartsWith" Value2="Sam"></sb:StringCondition>
                        </sb:Xor.Conditions>
                    </sb:Xor>
                </sb:Or.Conditions>
            </sb:Or>
            <sb:DateTimeOffsetCondition Value1="{Binding ElementName=DatePickerOp1,Path=Date}" Operator="Greater" Value2="{Binding 

ElementName=DatePickerOp2,Path=Date}"></sb:DateTimeOffsetCondition>
        </sb:If>
    </sb:Statement>
</StackPanel>

Then+Else

<StackPanel>
    <ToggleSwitch x:Name="CheckboxThenElse" IsOn="True"></ToggleSwitch>
                    
    <sb:Statement FontSize="30">                                                
        <sb:If>
            <sb:ScreenOrientationCondition Orientation="IsPortrait"></sb:ScreenOrientationCondition>
                            
            <sb:If.Then>
                <Button Content="Bonjour"></Button>
            </sb:If.Then>
            <sb:If.Else>
                <sb:If Else="Rien du tout">
                    <sb:BooleanCondition Value1="{Binding ElementName=CheckboxThenElse, Path=IsOn}" Operator="Equal" Value2="True"></sb:BooleanCondition>
                    <sb:If.Then>
                        <DatePicker></DatePicker>
                    </sb:If.Then>
                </sb:If>
            </sb:If.Else>                            
        </sb:If>
    </sb:Statement>
</StackPanel>

Binding Result

<StackPanel>
    <ToggleSwitch x:Name="CheckboxResult" IsOn="True"></ToggleSwitch>

    <sb:Statement FontSize="30" ShowResult="False">
        <sb:If x:Name="IfVisibility" Then="Visible" Else="Collapsed">
            <sb:BooleanCondition Value1="{Binding ElementName=CheckboxResult, Path=IsOn}" Value2="True"></sb:BooleanCondition>
        </sb:If>
    </sb:Statement>
                    
    <Button Content="Hello" Visibility="{Binding ElementName=IfVisibility, Path=Result}"></Button>
                    
</StackPanel>

You can found the complete sample here.

leave your comment