Bottom app bar icon display verschwommen

Question

Ich arbeite an der UWP App und ich habe Probleme mit dem unteren app bar-Symbol, das nicht richtig angezeigt wird.

Ich verwendete ein PNG-Format Bild mit der Größe von 48 * 48 Dimension, aber die Symbole sind nicht richtig in der unteren App-Leiste sichtbar. Ich habe einen Screenshot der unteren App-Leiste angehängt.

Screenshot:

Das ist mein Code ist, kann mir jemand empfehlen, wie richtige Symbol für die untere App-Leiste zu erhalten.

<Page.BottomAppBar> 
     <AppBar x:Name="applicationbar" Background="#FFE45427" IsSticky="True" PointerEntered="applicationbar_PointerEntered" PointerExited="applicationbar_PointerExisted" > 
      <StackPanel x:Name="bottombar" ScrollViewer.IsHorizontalRailEnabled="True" Orientation="Horizontal" HorizontalAlignment="Center"> 

       <AppBarButton Label="HOME" x:Name="appbarhome" Click="appbarhome_Click" PointerEntered="btnFilter_PointerEntered" PointerExited="btnFilter_PointerExited" ToolTipService.ToolTip="Dashboard" ToolTipService.Placement="Top"> 
        <AppBarButton.Icon> 
         <BitmapIcon UriSource="Images/DashboardImages/product-default-small.png" /> 
        </AppBarButton.Icon> 
       </AppBarButton> 

       <AppBarButton Label="Sales" x:Name="appbarsales" Click="appbarsales_Click" PointerEntered="btnFilter_PointerEntered" PointerExited="btnFilter_PointerExited" ToolTipService.ToolTip="Sales" ToolTipService.Placement="Top"> 
        <AppBarButton.Icon> 
         <BitmapIcon UriSource="Images/DashboardImages/menu_sales.png"/> 
        </AppBarButton.Icon> 
       </AppBarButton> 


       <AppBarButton Label="POS" x:Name="appbarpos" Click="appbarpos_Click" PointerEntered="btnFilter_PointerEntered" PointerExited="btnFilter_PointerExited" ToolTipService.ToolTip="POS" ToolTipService.Placement="Top"> 
        <AppBarButton.Icon> 
         <BitmapIcon UriSource="Images/DashboardImages/menu_pos.png"/> 
        </AppBarButton.Icon> 
       </AppBarButton> 


       <AppBarButton Label="Customer" x:Name="appbarcustomer" Click="customer_Click" PointerEntered="btnFilter_PointerEntered" PointerExited="btnFilter_PointerExited" ToolTipService.ToolTip="Customer" ToolTipService.Placement="Top"> 
        <AppBarButton.Icon> 
         <BitmapIcon UriSource="Images/DashboardImages/menu_customers.png"/> 
        </AppBarButton.Icon> 
       </AppBarButton> 

       <AppBarButton Label="About US" x:Name="appbarAboutUs" Click="aboutus_click" PointerEntered="btnFilter_PointerEntered" PointerExited="btnFilter_PointerExited" ToolTipService.ToolTip="About us" ToolTipService.Placement="Top"> 
        <AppBarButton.Icon> 
         <BitmapIcon UriSource="Images/DashboardImages/menu_aboutus.png"/> 
        </AppBarButton.Icon> 
       </AppBarButton> 

</Page.BottomAppBar> 

Answer 1

Nach dem Thema generating icon image

Dieses 7 templates/Aktionen im Wesentlichen Ausgabe 68 der erforderlichen und empfohlenen Bilder Vermögen für alle Skalierungsgrößen (100, 125, 150, 200, 400) und Paketbilder, um sicherzustellen, dass Ihre Anwendung auf jedem Bildschirm gut aussieht!

So müssen Sie Ihre Symbole für andere Bildschirmauflösungen erstellen und die Größe und korrekten Namen gelten:

menu_aboutus.Scale-100.png 
menu_aboutus.Scale-125.png 
menu_aboutus.Scale-150.png 
menu_aboutus.Scale-200.png 
menu_aboutus.Scale-400.png 

OS wählt automatisch das richtige Symbol