I'm developing a UWP application, however I'm not able to find where are the default icons.
Where can I find a list of them?
you can use character map application and select the font as segoe mdl2 assets. All the available icons will be shown. Alternatively in xaml also you can use like below code:
<SymbolIcon Symbol="Sync" Foreground="Red"/>
Related
me and my team are trying to put some .svg icons in our UWP win10 application (target and min version are Windows 10 Fall Creators update).
In my resource file I defined my SvgImageSource as following:
<SvgImageSource x:Key="PencilIcon" UriSource="Images/DeviceMenu/Icon_EditMode_grey.svg" />
And I then proceed to use this image source in my component:
<Image Source="{StaticResource PencilIcon}" />
I tried few different svgs and they all render with the right shape, but are all black (first one is the pencil):
The original svg looks like this:
Here is the source code of the SVG
I tried adjusting Stretch, Width, Height and so on but I just can't seem to get this to work.
UWP has no clue what css styles are.
In my case there was this:
<style
type="text/css"
id="style2">
.st0{fill:#996459;}
.st1{fill:#FFFFFF;}
.st2{fill:#B4B6BC;}
.st3{fill:#5C546A;}
.st4{fill:#868491;}
.st5{fill:#0F4499;}
</style>
To fix this for UWP, find every class="..." and manually apply the style.
This is a known problem of Adobe Illustrator, try playing with its SVG export settings.
If illustrator
Use Styling: "Presentation Attributes"
If you use illustrator then try to change styling. It should be something like Style Attributes.
UWP just partially supports SVG Ver 1.1 specification (see SVG Support)
And it doesn't support css-like styles.
See image
You can play with export settings of Adobe Illustrator for export image : AI export Settings
Or fix it manually: See image
Or with my tool:
Visual Studio extension at Marketplace.
Desktop version at Github releases
This tool just inlines css styles directly to the svg elements.
In Android, it is quite easy to set a image placeholder for development purposes in an imageview.
All one would do is use the tools:src for the placeholder image during development so you could see it in your layout design preview and your actual image you would put into your android:src
. Frequently, you don't set the android:src put would populate that imageview with images that you download off the internet once you connect your app to the net:
<ImageView
android:layout_width="28dp"
android:layout_height="28dp"
android:src=#drawable/activated_icon"
tools:src="#mipmap/white_activated_icon" />
In Xamarin, you have this to display images:
<Image Source="http://lorempixel.com/1920/1080/nature/3" />
Once the app connects, the image is downloaded from the internet and displayed. How do I put in a placeholder image for development purposes (similar to the way you would do it through tools:src in android) so I can see it within the layout design previews?
I'm assuming you want to achieve this with Xamarin Forms, as you referring to XAML in the question title.
Or possibly you are referring to the Xamarin Forms Previewer? In that case, disregard the following answer. You can only use local images in the Previewer as far as I can tell.
Answer in case the question is related to runtime Xamarin Forms
There is no standard option to do this in Xamarin Forms. Take a look at this example suggested by Stephane Delcroix from the Xamarin Forums. The important part of this approach is to stack 2 images on top of each other in a grid. 1 is the placeholder that is placed beneath the image that is being loaded, like this:
var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition());
grid.Children.Add (image);
grid.Children.Add (placeholderImage);
As an alternative option, WebImage of Xamarin Forms Labs allows an option for a DefaultImage, but I'm not sure if that shows immediately. See this class for the code of the Web Image. Keep in mind that Xamarin Forms Labs is no longer under active maintenance.
Of course you can also write a custom renderer. Maybe based on the Xamarin Forms Labs example.
I use FFImageLoading for this Case.
Just install the Nuget Package and Use the "CachedImage" in XAML.
<ff:CachedImage Source="your url" Placeholder="placeholder while loading"/>
You don´t need to download (and cache) the Image manually then. It will automatically displayed when the download is done.
You can use local files (from Resources or Drawable) and files from HTTP/HTTPS.
I would like to modify the design of the chrome and top menu panel of my app where the close and minify icons are.
How do I do this and in what XAML file? Should it be done in App.xaml, or in my main page's xaml file? I can find instructions on how to do this in a WPF app, but the concepts don't seem to carry over to Univeral App XAML.
As far as I know, you can change some settings from the chrome bar in the uwp, but not fully customize it by default.
The starting point for doing so would be the ApplicationView's TitleBar property.
This allows you to change the colors of the buttons and the bar itself:
var titleBar = ApplicationView.GetForCurrentView().TitleBar;
if (titleBar != null)
{
titleBar.ButtonBackgroundColor = Colors.DarkBlue;
titleBar.ButtonForegroundColor = Colors.White;
titleBar.BackgroundColor = Colors.Blue;
titleBar.ForegroundColor = Colors.White;
}
It is worth mentioning that when running the application on a PC, the control is called TitleBar but on a mobile device, it is called StatusBar. Full example for handling both devices can be found here.
If you need more personalization options, creating your own TitleBar component should be possible, look for the ExtendViewIntoTitleBar property of the CoreApplicationViewTitleBar object.
More info can be found here.
You need to use a resource dictionary with the custom styles. You can import these themes via App.Xaml to apply it.
These links might be of help. If you have any specific questions feel free to ask.
ResourceDictionary and XAML resource references
XAML theme resources
I am new on windows phone development and I need scroll number picker (as time picker in Alarm app) as shown in image how can i get it.....
View Image Here
If you just need a list of numbers similar to the TimePicker then populate the same primitive controls that the TimePicker uses. In this case you're look at LoopingSelector, you still need to NuGet/Install the windows phone toolkit.
Use
<phone:PhoneApplicationPage
xmlns:toolkit_primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit">
<toolkit_primitives:LoopingSelector>
<primitives:LoopingSelector.ItemTemplate>
<DataTemplate>
<!-- design your own square box+text -->
</DataTemplate>
</primitives:LoopingSelector.ItemTemplate>
</toolkit_primitives:LoopingSelector>
For more information:
See TimePickerPage.xaml Source Code
See MSDN Forum on LoopingSelector
OLD Solution
If you're using WP 8.0+ SL then see this SO Post: TimePicker 24h Format. It deals with the Windows Phone Toolkit: TimePicker <toolkit:TimePicker>
Else if you're doing a WP8.1 runtime app just set the ClockIdentifier to 24HourClock.
<TimePicker Header="24HourClock" ClockIdentifier="24HourClock"/>
I would like to use Anonymous Pro font in a Windows RT application. I was trying to follow the steps from this thread, but without any success.
This is my try:
<TextBlock Text="{Binding Title}" HorizontalAlignment="Center" FontSize="56"
FontFamily="/Assets/Fonts/Anonymous Pro.ttf"
/>
Instead of Anonymous Pro the default font is used. Actually, it the sample (see the link) the font family is specified, but I'm not sure: should I do it or should not. If I should, which family should be there?
So how to embed custom font in Windows RT application and use it from there?
here you go.. just appened the font name.. blogged about it when i saw you post
http://invokeit.wordpress.com/2012/10/18/embed-use-custom-font-in-windows-8-store-apps-win8dev-winrt/