Segmented Control Command

[Alex-451]

Hey, so im trying to run a Command each time someone clicks a new BottomTabItem instead of loading a new ContentView.

My current code opens a new ContentView which seems quite slow to me. So how would a run a command if a tab gets clicked?

Repository with the code Current code:

<ContentPage.Content>
        <Grid> 
                <StackLayout>
                    <tabs:ViewSwitcher x:Name="Switcher"
                                       Padding="0,0,0,0"
                                       Animate="True"
                                       SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">
                    <views:YoutubeSmallPage/>
                    <views:InstagramSmallPage/>
                    <views:TiktokSmallPage/>
                    <views:TwitterSmallPage/>
                    <views:TwitchSmallPage/>
                </tabs:ViewSwitcher>
                </StackLayout>

            <tabs:TabHostView x:Name="TabHost"
                              HeightRequest="40"
                              WidthRequest="300"
                              Margin="0,0,0,20"
                              VerticalOptions="End"
                              HorizontalOptions="Center"
                              BackgroundColor="#F0F0F3"
                              Shades="{sh:SingleShade Offset='0,8',
                                            Color={StaticResource Primary},
                                            BlurRadius=10,
                                            Opacity=0.2}"
                              CornerRadius="50"
                              IsSegmented="True"
                              SegmentedHasSeparator="True"
                              SegmentedOutlineColor="{StaticResource Primary}"
                              TabType="Fixed"
                              SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
                <tabs:TabHostView.Tabs>
                    <tabs:BottomTabItem Style="{StaticResource SegmentedTabStyle}" IconImageSource="youtube.png" IconSize="20" Padding="0,10,0,0" UnselectedIconColor="#d44141"/>
                    <tabs:BottomTabItem Style="{StaticResource SegmentedTabStyle}" IconImageSource="instagram.png" IconSize="20" Padding="0,10,0,0" UnselectedIconColor="#aa7a50"/>
                    <tabs:BottomTabItem Style="{StaticResource SegmentedTabStyle}" IconImageSource="tiktok.png" IconSize="20" Padding="0,10,0,0"/>
                    <tabs:BottomTabItem Style="{StaticResource SegmentedTabStyle}" IconImageSource="twitter.png" IconSize="20" Padding="0,10,0,0" UnselectedIconColor="#08a0e9"/>
                    <tabs:BottomTabItem Style="{StaticResource SegmentedTabStyle}" IconImageSource="twitch.png" IconSize="20" Padding="0,10,0,0" UnselectedIconColor="#816ea4"/>
                </tabs:TabHostView.Tabs>
            </tabs:TabHostView>
        </Grid>
    </ContentPage.Content>```

If i open the page which contains the tabs it at least takes around one second to load the page.

[roubachof]

You may want to wrap all your pages in lazyviews it will load way more quickly

[Alex-451]

Thanks for your quick response, i implemented LazyViews which unfourtunately didnt fix my issue and it still takes quite some time to load the view.(Not sure if i implemented it correctly though) My repository

Also, where can i find the LazyView documentation?

[roubachof]

Here is the blog: https://www.sharpnado.com/xamarin-forms-lazyview-boost-your-app-reactivity-and-startup-time/

[Alex-451]

Yeah i read that article, im just not sure if i implemented that correctly (it was way to simple to be right).

[roubachof]

Anyways, it's not about the tabs but how your target view is layout and when you need to initialize it. Closing the issue.