Tile Gadget

---

Tile gadget dùng để tạo menu truy cập các tính năng trong ứng dụng di động.

Tile được định nghĩa là 1 nút bấm có

• Hình ảnh

• Tên

• Lệnh

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:ce="clr-namespace:SPC.Views.Dashboard">
    <ContentView.Content>
        <StackLayout Margin="10,0,10,0" x:Name="Tileroot" Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="Fill">
            <StackLayout Margin="0">
                <Label Text="Workflows" />
                <FlexLayout Padding="0" Direction="Row" Wrap="Wrap" AlignItems="Start">
                    <ce:Tile Scale="0.8" Caption="New Task" ImageCode="NewTask" CommandUrl="SPC.BO.WF.NewDocument" BackgroundColor="Gray">
                    </ce:Tile>
                    <ce:Tile Scale="0.8" Caption="My Tasks" ImageCode="MyTasks" CommandUrl="SPC.BO.WF.MyTasks" BackgroundColor="Gray">
                    </ce:Tile>
                    <ce:Tile Scale="0.8" Caption="Approve Tasks" ImageCode="Workflows" CommandUrl="SPC.BO.WF.Tasks" BackgroundColor="Gray">
                    </ce:Tile>
                </FlexLayout>
            </StackLayout>
            <StackLayout Margin="0">
                <Label Text="Dashboard">
                </Label>
                <FlexLayout Padding="0" Direction="Row" Wrap="Wrap" AlignItems="Start">
                    <ce:Tile Scale="0.8" Caption="Dashboards" ImageCode="Dashboards" CommandUrl="SPC.BO.DashboardList" BackgroundColor="Gray">
                    </ce:Tile>
                    <ce:Tile Scale="0.8" Caption="Queries" ImageCode="Queries" CommandUrl="SPC.BO.Inquiry.UserQueries" BackgroundColor="Gray">
                    </ce:Tile>
                    <ce:Tile Scale="0.8" Caption="Commands" ImageCode="Forms" CommandUrl="SPC.Commands" BackgroundColor="Gray">
                    </ce:Tile>
                </FlexLayout>
            </StackLayout>
        </StackLayout>
    </ContentView.Content>
</ContentView>  

Trong ví dụ trên các ô tile được định nghĩa thông qua thẻ

<ce:Tile Scale="0.8" Caption="Approve Tasks" ImageCode="Workflows" CommandUrl="SPC.BO.WF.Tasks" BackgroundColor="Gray">
</ce:Tile>

Trong đó ce là prefix cho namespace xmlns:ce="clr-namespace:SPC.Views.Dashboard" là nơi Tile được Phoebus xây dựng trước.

Tile được định nghĩa như sau trong ví dụ :

• Hình ảnh: ImageCode="Workflows" Các mã hình ảnh có thể sử dụng có thể tham khảo tại ImageConverters

• Tên lệnh : Caption="Approve Tasks".

• Lệnh thực hiện khi user bấm vào: CommandUrl="SPC.BO.WF.Tasks"

• Màu nền : BackgroundColor="Gray"

• Scale : tỷ lệ phóng to , thu nhỏ của 1 tile. Tile được định nghĩa với kích thước 100 x 100. trong ví dụ trên Tile được thu nhỏ = 80% tỷ lệ nguyên bản. Scale="0.8"

Các tiles được đặt trong một [FlexLayout](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout).

FlexLayout là component chuẩn cung cấp bởi Microsoft. Nó liệt kê tuần tự các tile theo chiều ngang nhờ thuộc tính Direction="Row" khi không còn không gian để hiển thị. Các tile tiếp theo sẽ được mang xuống hàng dưới theo quy định của thuộc tính Wrap="Wrap". Tiles sẽ được bắt đầu từ bên trái qua phải do thuộc tính AlignItems="Start"

Xem thêm

Dashboard Design for Mobile Apps Dashboard

---

_{Updated on : 2020-03-30 00:47:08}. _{by : at T470-01}.

_{Topic : TileGadget}