How does it work ? OnIdiom

Question

User377837 posted

Hello,

I am wondering why this is working, and what is really going on at execution.

I have a layout with something like :

*XAML : *

<OnIdiom x:TypeArguments="View">
                <OnIdiom.Phone>
                    <ListView x:Name="listPhone"/>
         </OnIdiom.Phone>
        <OnIdiom.Tablet>
                    <ListView x:Name="listTablet"/>
         </OnIdiom.Tablet>
</OnIdiom>

*XAML.CS : *

 listPhone.ItemsSource = mylist;
 listTablet.ItemsSource = mylist;

When I run on Phone, listTablet is not supposed to be undeclared ? Does it uses ressources, or it just do nothing ? Should I check on what device I am, and set the itemSource only for the current device ?

Answer 1

User53115 posted

I believe the way it works is that everything in the OnIdiom tag is created, then a switch statement is run to assign one of those values. So it would be less resource-intensive to write the code in C# to only create the thing after you determine the idiom. Same applies to OnPlatform.

Answer 2

User369978 posted

As JoeManke said , once you define the values on all platforms , the compiler will switch the corresponding code according to the platform.

Here you don't have to create two ListView , since the data is shared on Phone or Tablet ,just define the different ui style with OnIdiom .

 <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="stackLayoutStyle" TargetType="StackLayout">
                <Setter Property="Padding">
                    <Setter.Value>
                        <OnIdiom x:TypeArguments="Thickness" Tablet="40, 40, 40, 0" Phone="5, 5, 5, 0"/>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="labelStyle" TargetType="Label">
                <Setter Property="BackgroundColor">
                    <Setter.Value>
                        <OnIdiom x:TypeArguments="Color" Tablet="Red" Phone="Black"/>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ListView ItemsSource="{Binding mylist}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Style="{StaticResource stackLayoutStyle}">
                        <Label Style="{StaticResource labelStyle}" Text="{Binding text}"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>