Making something like Fragment in UWP

2019-09-16 02:06发布

I writing app for UWP.

I have app very similar to Windows 10 Mail app.

I have this UI

enter image description here

Here is xaml of this screen

<Grid BorderBrush="White" BorderThickness="1">
    <Grid.Background>
        <ImageBrush Stretch="Fill" ImageSource="Images/Background.png"/>
    </Grid.Background>
    <Grid HorizontalAlignment="Left" Height="720" VerticalAlignment="Top" Width="60" BorderBrush="#FFF5F1F1" BorderThickness="0,0,1,0">
        <Button x:Name="MenuButton" Content="" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="38" Width="38">
            <Button.Background>
                <ImageBrush Stretch="Uniform" ImageSource="Images/Menu-100.png"/>
            </Button.Background>
        </Button>
        <Button x:Name="logoutbutton" Content="" HorizontalAlignment="Left" Margin="10,650,0,0" VerticalAlignment="Top"  Height="43" Width="38">
            <Button.Background>
                <ImageBrush Stretch="Uniform" ImageSource="Images/Logout_Button.png"/>
            </Button.Background>
        </Button>

    </Grid>
    <Grid HorizontalAlignment="Left" Height="47" Margin="63,2,-121,0" VerticalAlignment="Top" Width="1338" BorderBrush="#FFFDFDFD" Padding="0,0,0,1" BorderThickness="0,0,0,1">
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="В Работе" VerticalAlignment="Top" Height="47" Width="1218" FontSize="32" FontFamily="SF UI Display" Padding="550,0,0,0" Foreground="White"/>
    </Grid>
    <ScrollViewer HorizontalAlignment="Left" Height="668" Margin="63,52,0,0" VerticalAlignment="Top" Width="350">
        <GridView   x:Name="OrdersGridView" >
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel >
                        <Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
                            <TextBlock Text="{Binding date_created}"  HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap"  VerticalAlignment="Top" Width="350" Height="50" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
                            <TextBlock  TextAlignment="Center"  HorizontalAlignment="Left" Margin="0,146,-1,0" TextWrapping="Wrap" Text="{Binding billing.address_1}" VerticalAlignment="Top" Height="58" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
                            <TextBlock  HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="{Binding billing.first_name}" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" Padding="0,0,0,0"/>

                        </Grid>

                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </ScrollViewer>



</Grid>

I make Binding in code like this:

public async void Down()
    {




        RestAPI rest = new RestAPI("http://simplegames.com.ua/wp-json/wc/v1/", "ck_9d64c027d2c5f81b8bed3342eeccc6d337be813d", "cs_60697b1e6cbdeb8d62d19e0765e339f8e3334754");
        WCObject wc = new WCObject(rest);
        //Get all products
        var orders = await wc.GetOrders(new Dictionary<string, string>() {
            { "per_page", "100" }, { "status","processing"} }); // Dodelat filtr dlaya teh chto v  rabote




        string products = orders.ToFormattedJsonString();



        List<RootObject> rootObjectData = JsonConvert.DeserializeObject<List<RootObject>>(products);




       foreach (RootObject root in rootObjectData)
        {


            string date = root.date_created;
            string name = root.billing.first_name;



            Orders = new ObservableCollection<RootObject>(rootObjectData) { new RootObject { date_created = date}


    };
        OrdersGridView.ItemsSource = Orders;



        };
    }
}

}

I need to open smth like Fragment.

Here is UI how it need to be like:

enter image description here

How I can do this?

Thank's for help so much!

0条回答
登录 后发表回答