Telerik Blazor Mobile Bindings for Xamarin


<ContentView>

    <Grid Padding="new Thickness(0,40,0,0)">

        <Layout>

            <RowDefinition GridUnitType="GridUnitType.Auto" />

            <RowDefinition GridUnitType="GridUnitType.Star" />

        </Layout>

        <Contents>

            <GridCell>

                <StackLayout Orientation="StackOrientation.Horizontal"

                             Spacing="10">

                    <RadButton BorderWidth="0"

                               CornerRadius="0"

                               HeightRequest="50"

                               WidthRequest="50"

                               BorderColor="Color.Transparent"

                               BackgroundImage="@(new FileImageSource { File="HamburgerMenu.png" })"

                               OnClick="@ChangeDrawerState" />

 

                    <RadBorder BorderColor="@Color.LightSkyBlue"

                               Padding="new Thickness(2)"

                               BorderThickness="new Thickness(0,0,0,2)">

                        <Label Text="Telerik UI for Xamarin Mobile Blazor Bindings!"

                               HorizontalTextAlignment="TextAlignment.Center"

                               VerticalTextAlignment="TextAlignment.Center"

                               FontAttributes="FontAttributes.Bold"

                               FontSize="15"/>

                    </RadBorder>

 

                </StackLayout>

            </GridCell>

            <GridCell Row="1">

                <RadSideDrawer DrawerLength="200"

                               IsOpen="@IsDrawerOpen">

                    <MainContent>

                        <Telerik.XamarinForms.Blazor.Primitives.SideDrawer.MainContent>

                            <Grid Padding="5">

                                <Layout>

                                    <RowDefinition GridUnitType="GridUnitType.Auto" />

                                    <RowDefinition GridUnitType="GridUnitType.Star" />

                                </Layout>

                                <Contents>

                                    <GridCell>

                                        <RadExpander>

                                            <ExpanderHeader>

                                                <Telerik.XamarinForms.Blazor.Primitives.Expander.ExpanderHeader.ExpanderHeader IndicatorColor="@Color.LightSkyBlue">

                                                    <StackLayout>

                                                        <Label Text="Expander control"

                                                               HeightRequest="40"

                                                               FontSize="15"

                                                               TextColor="@Color.Black"

                                                               VerticalTextAlignment="TextAlignment.Center" />

                                                    </StackLayout>

                                                </Telerik.XamarinForms.Blazor.Primitives.Expander.ExpanderHeader.ExpanderHeader>

                                            </ExpanderHeader>

                                            <ExpanderContent>

                                                <Telerik.XamarinForms.Blazor.Primitives.Expander.ExpanderContent>

                                                    <StackLayout Margin="new Thickness(10, 20, 10, 20)">

                                                        <StackLayout Orientation="StackOrientation.Horizontal"

                                                                     Spacing="10">

                                                            <RadCheckBox UncheckedColor="@Color.LightSkyBlue"

                                                                         CheckedColor="@Color.LightSkyBlue"

                                                                         CheckedSymbolColor="@Color.Black"/>

                                                            <Label Text="Mobile Blazor Bindings"

                                                                   FontSize="15"

                                                                   VerticalTextAlignment="TextAlignment.Center"

                                                                   HorizontalTextAlignment="TextAlignment.Center"

                                                                   TextColor="@Color.Black"/>

                                                        </StackLayout>

                                                        <StackLayout Orientation="StackOrientation.Horizontal"

                                                                     Spacing="10">

                                                            <RadCheckBox UncheckedColor="@Color.LightSkyBlue"

                                                                         CheckedColor="@Color.LightSkyBlue"

                                                                         CheckedSymbolColor="@Color.Black"/>

                                                            <Label Text="Telerik UI for Xamarin"

                                                                   TextColor="@Color.Black"

                                                                   FontSize="15"

                                                                   VerticalTextAlignment="TextAlignment.Center"

                                                                   HorizontalTextAlignment="TextAlignment.Center"/>

                                                        </StackLayout>

                                                    </StackLayout>

                                                </Telerik.XamarinForms.Blazor.Primitives.Expander.ExpanderContent>

                                            </ExpanderContent>

                                        </RadExpander>

                                     </GridCell>

                                     <GridCell Row="1">

                                         <Grid>

                                             <Layout>

                                                 <RowDefinition GridUnitType="GridUnitType.Auto" />

                                                 <RowDefinition GridUnitType="GridUnitType.Star" />

                                             </Layout>

                                             <Contents>

                                                 <GridCell>

                                                     <RadButton Text="Show/Hide Busy Indicator"

                                                                OnClick="@ChangeBusyState"

                                                                TextColor="@Color.Black"

                                                                BackgroundColor="@Color.LightSkyBlue"/>

                                                      

                                                 </GridCell>

                                                 <GridCell Row="1">

                                                     <RadBusyIndicator AnimationContentHeightRequest="100"

                                                                       AnimationContentWidthRequest="100"

                                                                       AnimationContentColor="@Color.LightSkyBlue"

                                                                       AnimationType="Telerik.XamarinForms.Primitives.AnimationType.Animation4"

                                                                       IsBusy="@IsBusy" />

                                                 </GridCell>

                                             </Contents>     

                                         </Grid>

                                     </GridCell>

                                </Contents>

                            </Grid>

                        </Telerik.XamarinForms.Blazor.Primitives.SideDrawer.MainContent>

                    </MainContent>

                    <DrawerContent>

                        <Telerik.XamarinForms.Blazor.Primitives.SideDrawer.DrawerContent>

                            <Grid>

                                <Layout>

                                    <RowDefinition GridUnitType="GridUnitType.Auto" />

                                    <RowDefinition GridUnitType="GridUnitType.Star" />

                                </Layout>

                                <Contents>

                                    <GridCell>

                                        <Label Text="ListView control"

                                               HorizontalTextAlignment="TextAlignment.Center"

                                               VerticalTextAlignment="TextAlignment.Center"

                                               FontAttributes="FontAttributes.Bold"

                                               FontSize="15"/>

                                    </GridCell>

                                    <GridCell Row="1">

                                        <RadListView ItemsSource="@Source">

                                            <ItemStyle>

                                                <Telerik.XamarinForms.Blazor.DataControls.ListView.ListViewItemStyle TextCellTextColor="@Color.Black"/>

                                            </ItemStyle>

                                            <SelectedItemStyle>

                                                <Telerik.XamarinForms.Blazor.DataControls.ListView.ListViewItemStyle TextCellTextColor="Color.Black"

                                                                                                                     BackgroundColor="@Color.LightSkyBlue"/>

                                            </SelectedItemStyle>

                                        </RadListView>

                                    </GridCell>

                                </Contents>

                            </Grid>

                        </Telerik.XamarinForms.Blazor.Primitives.SideDrawer.DrawerContent>

                    </DrawerContent>

                </RadSideDrawer>

            </GridCell>

        </Contents>

    </Grid>

</ContentView>

 

 

@code {

 

    protected override void OnInitialized()

    {

        base.OnInitialized();

 

        this.IsDrawerOpen = false;

        this.IsBusy = false;

 

 

        this.Source = new List<string>()

        {

            "Tokyo",

            "London",

            "Madrid",

            "Paris",

            "Mexico",

            "New York",

            "Sidney"

        };

    }

 

    public bool IsDrawerOpen { get; set; }

 

    public bool IsBusy { get; set; }

 

    public List<string> Source { get; set; }

 

    public void ChangeDrawerState()

    {

        this.IsDrawerOpen = !this.IsDrawerOpen;

    }

 

    public void ChangeBusyState()

    {

        this.IsBusy = !this.IsBusy;

    }

}

Source link

Leave a Reply