Adpative Listview to adjust according to screen size for UWP xaml app



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








0















Listview contents multiple item like textblock
how can we make it the list view adaptive as per the screen resolution where the grid contains multiple boxs of listview.
Need to adjust below similar xaml page listitem and text as per sceen changes



enter image description here










share|improve this question
























  • Have you checked AdaptiveGridView that from community tool?

    – Nico Zhu - MSFT
    Nov 16 '18 at 3:10











  • Your XAML/what your tried ?

    – Shubham Sahu
    Nov 16 '18 at 9:39

















0















Listview contents multiple item like textblock
how can we make it the list view adaptive as per the screen resolution where the grid contains multiple boxs of listview.
Need to adjust below similar xaml page listitem and text as per sceen changes



enter image description here










share|improve this question
























  • Have you checked AdaptiveGridView that from community tool?

    – Nico Zhu - MSFT
    Nov 16 '18 at 3:10











  • Your XAML/what your tried ?

    – Shubham Sahu
    Nov 16 '18 at 9:39













0












0








0








Listview contents multiple item like textblock
how can we make it the list view adaptive as per the screen resolution where the grid contains multiple boxs of listview.
Need to adjust below similar xaml page listitem and text as per sceen changes



enter image description here










share|improve this question
















Listview contents multiple item like textblock
how can we make it the list view adaptive as per the screen resolution where the grid contains multiple boxs of listview.
Need to adjust below similar xaml page listitem and text as per sceen changes



enter image description here







xaml uwp adaptive-ui






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 16 '18 at 5:29









CoCaIceDew

636




636










asked Nov 15 '18 at 15:58









Vaibhav MeenaVaibhav Meena

13




13












  • Have you checked AdaptiveGridView that from community tool?

    – Nico Zhu - MSFT
    Nov 16 '18 at 3:10











  • Your XAML/what your tried ?

    – Shubham Sahu
    Nov 16 '18 at 9:39

















  • Have you checked AdaptiveGridView that from community tool?

    – Nico Zhu - MSFT
    Nov 16 '18 at 3:10











  • Your XAML/what your tried ?

    – Shubham Sahu
    Nov 16 '18 at 9:39
















Have you checked AdaptiveGridView that from community tool?

– Nico Zhu - MSFT
Nov 16 '18 at 3:10





Have you checked AdaptiveGridView that from community tool?

– Nico Zhu - MSFT
Nov 16 '18 at 3:10













Your XAML/what your tried ?

– Shubham Sahu
Nov 16 '18 at 9:39





Your XAML/what your tried ?

– Shubham Sahu
Nov 16 '18 at 9:39












1 Answer
1






active

oldest

votes


















0














For your requirement, you could use WrapPanel Xaml Control to approach. you just replace the default ListView ItemsPanelTemplate with WrapPanel. For more detail you could refer the following code.



<ListView Name="WrapPanelContainer"
IsItemClickEnabled="True"
ItemTemplate="StaticResource PhotoTemplate">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel Background="ThemeResource Brush-Grey-04"
Padding="0,0,0,0"
VerticalSpacing="5"
HorizontalSpacing="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListView>





share|improve this answer

























    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53323276%2fadpative-listview-to-adjust-according-to-screen-size-for-uwp-xaml-app%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    For your requirement, you could use WrapPanel Xaml Control to approach. you just replace the default ListView ItemsPanelTemplate with WrapPanel. For more detail you could refer the following code.



    <ListView Name="WrapPanelContainer"
    IsItemClickEnabled="True"
    ItemTemplate="StaticResource PhotoTemplate">
    <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
    <controls:WrapPanel Background="ThemeResource Brush-Grey-04"
    Padding="0,0,0,0"
    VerticalSpacing="5"
    HorizontalSpacing="5" />
    </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    </ListView>





    share|improve this answer





























      0














      For your requirement, you could use WrapPanel Xaml Control to approach. you just replace the default ListView ItemsPanelTemplate with WrapPanel. For more detail you could refer the following code.



      <ListView Name="WrapPanelContainer"
      IsItemClickEnabled="True"
      ItemTemplate="StaticResource PhotoTemplate">
      <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
      <controls:WrapPanel Background="ThemeResource Brush-Grey-04"
      Padding="0,0,0,0"
      VerticalSpacing="5"
      HorizontalSpacing="5" />
      </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      </ListView>





      share|improve this answer



























        0












        0








        0







        For your requirement, you could use WrapPanel Xaml Control to approach. you just replace the default ListView ItemsPanelTemplate with WrapPanel. For more detail you could refer the following code.



        <ListView Name="WrapPanelContainer"
        IsItemClickEnabled="True"
        ItemTemplate="StaticResource PhotoTemplate">
        <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
        <controls:WrapPanel Background="ThemeResource Brush-Grey-04"
        Padding="0,0,0,0"
        VerticalSpacing="5"
        HorizontalSpacing="5" />
        </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        </ListView>





        share|improve this answer















        For your requirement, you could use WrapPanel Xaml Control to approach. you just replace the default ListView ItemsPanelTemplate with WrapPanel. For more detail you could refer the following code.



        <ListView Name="WrapPanelContainer"
        IsItemClickEnabled="True"
        ItemTemplate="StaticResource PhotoTemplate">
        <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
        <controls:WrapPanel Background="ThemeResource Brush-Grey-04"
        Padding="0,0,0,0"
        VerticalSpacing="5"
        HorizontalSpacing="5" />
        </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        </ListView>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 22 '18 at 9:17

























        answered Nov 22 '18 at 8:38









        Nico Zhu - MSFTNico Zhu - MSFT

        10.8k1624




        10.8k1624





























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53323276%2fadpative-listview-to-adjust-according-to-screen-size-for-uwp-xaml-app%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Use pre created SQLite database for Android project in kotlin

            Darth Vader #20

            Ondo