Build XAML Elements in Runtime, From a List of Data in UWP C#?

Question

I have a List<string> which is below,

List<string> animeList = new()
{
    "Current",
    "Planning",
    "Paused",
    "Dropped",
    "Custom List"
}

I want to build a XAML Element in Runtime from the data available in the above list. To be precise, I want to build a NavigationViewItem which is from Microsoft.UI.Xaml.Controls Like the below Image,

The Xaml in this picture is hardcoded and that XAML is Below,

<winui:NavigationViewItem Content="Anime List" x:Name="animeList">
                <winui:NavigationViewItem.Icon>
                    <FontIcon Glyph="&#xE29B;"
                              Style="{StaticResource FontIconStyle}"/>
                </winui:NavigationViewItem.Icon>
                <winui:NavigationViewItem.MenuItems>
                    <winui:NavigationViewItem Content="Current"/>
                    <winui:NavigationViewItem Content="Planning"/>
                    <winui:NavigationViewItem Content="Paused"/>
                    <winui:NavigationViewItem Content="Dropped"/>
                    <winui:NavigationViewItem Content="Custom List"/>
                </winui:NavigationViewItem.MenuItems>
            </winui:NavigationViewItem>

Here the winui xml namespace is below,

xmlns:winui="using:Microsoft.UI.Xaml.Controls"

Here, instead of hardcoding the NavigationViewItem, I want to build the NavigationViewItem from the above animeList in the Runtime. How can I do it.

Thanks in Advance...

Answer 1

You can create a loop, and for every item, you create a new NavigationViewItem

public MainPage()
{
    this.InitializeComponent();

    foreach (string anime in animeList)
    {
        animeNavigationViewItem.MenuItems.Add(
            new winui.NavigationViewItem
            {
                 Content = anime
            });
    }
}

Answer 2

Not sure if this will work as expected. Hope this might help.

One of the issue was there were some misplaced brackets. And when I fixed the misplaced brackets I noticed that these two lines are trying to access the properties (enemy and enemy2) which are scoped inside the method runEnemy.

enemy.animate(properties, options);
enemy2.animate(properties, options2);

I made runEnemy methods to return properties that above two line requires.

$(function () {
  var runGame;
  var dones = false;

  var runEnemy = function () {//ENEMY
    var enemy = $(".enemy");
    var properties = {
      right: $(".container").width(),
      display: "block"
    };
    return {enemy, properties}
  };

  var runEnemy2 = function () {//ENEMY2
    var enemy2 = $(".enemy2");
    return {enemy2}
    };




    var options = { //ENEMY ATTACK DURATION
      duration: 2500,
      done: function () {
        var w = $(this).width() * -1;
        $(this).css({
          right: w
        });
      },
    };

      var options2 = { //ENEMY2 ATTACK DURATION
      duration: 5000,
      done: function () {
        var w2 = $(this).width() * -1;
        $(this).css({
          right: w2
        });
      },

      progress: function () {
        console.log(overlaps($(".hero"), $(".enemy"), $(".enemy2")));

        var laped = overlaps($(".hero"), $(".enemy"), $(".enemy2"));

        var heroLoc = document.getElementsByClassName("hero")[0].offsetTop;
        var enemyLoc = document.getElementsByClassName("enemy")[0].offsetTop;
        var enemy2Loc = document.getElementsByClassName("enemy2")[0].offsetTop;
        var loc = enemyLoc + enemy2Loc - heroLoc;

        console.log(
          "enemy: " + enemyLoc + enemy2Loc + " hero: " + heroLoc + " loc: " + loc
        );
        

        //Hitbox
        if (loc > 0 && laped === false) {
          dones = true;                     
          console.log("WIN");
        } else if (laped === true && loc < 0) {
          dones = false;
          $(".enemy").stop();
          $(".enemy2").stop();
          var score = parseInt($(".score").html());
          $(".hero").addClass("stopAnimate");
          $(".container").addClass("stopAnimate");
          $(".lose p").html("You Scored : " + score);
          clearInterval(runGame);
          $(".lose").addClass("lost");
          console.log("LOSE");
        }
      },

      complete: function () {
        if (dones === true) {
          var score = parseInt($(".score").html());
          $(".score").html(score + 1);
        }
        
      }
    };
    
    runEnemy().enemy.animate(runEnemy().properties, options);
    runEnemy2().enemy2.animate(runEnemy().properties, options2);

  var overlaps = (function () {
    function getPositions(elem) {
      var pos, width, height;
      pos = $(elem).position();
      width = $(elem).width();
      height = $(elem).height();
      return [
        [pos.left, pos.left + width],
        [pos.top, pos.top + height]
      ];
    }

    function comparePositions(p1, p2) {//COMPARE POSITIONS 
      var r1, r2;
      r1 = p1[0] < p2[0] ? p1 : p2;
      r2 = p1[0] < p2[0] ? p2 : p1;
      return r1[1] > r2[0] || r1[0] === r2[0];
    }
    return function (a, b) {
      var pos1 = getPositions(a),
        pos2 = getPositions(b);
      return (
        comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1])
      );
    };
  })();

  // Events

  $(this).keypress(function (e) {
    console.log("JUMP");
    if (e.keyCode === 32) {
      if ($(".lose").hasClass("lost") === false) {
        $(".hero")
          .toggleClass("jump")
          .bind(
            "webkitTransitionEnd oTransitionend oTransitionEnd msTransitionEnd transitionend",
            function (e) {
              if ($(this).hasClass("jump")) {
                console.log("DROP");
                $(this).toggleClass("jump");
              }
            }
          );
      }
    }
  });

  setTimeout(function () {
    runGame = setInterval(function () {
      runEnemy()
    }, 2000);//ENEMY INTERVAL 
  }, 0);//+INITIAL WAIT

});