CODEWITHSUNDEEP
xamlwin-universal-appwindows-10uwp
Hardik Kothari
Hardik Kothari

Reputation: 1766

Bottom app bar icon display blurred

I am working on UWP app and I have issue regarding the bottom app bar icon which is not displayed properly.

I used a PNG format image with the size of 48*48 dimension, but the icons are not properly visible in bottom app bar. I attached a screenshot of the bottom app bar.

Screenshot:

enter image description here

This is my code, can anyone suggest me how to get proper icon for the bottom app bar.

<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>

Upvotes: 0

Views: 397

Answers (1)

Andrii Krupka
Andrii Krupka

Reputation: 4306

According to the topic of generating icon image

These 7 templates/actions essentially output 68 of the required and recommended images assets for all the scale sizes (100, 125, 150, 200, 400) and package images needed to ensure your application looks great on any screen!

So, you need to create and resize your icons for other screen resolutions and apply correct name:

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 automatically selects the correct icon

Upvotes: 1

Related Questions