I am making a windows phone 8 silverlight app. And I am using font-awesome icons on my app's mainpage.. they do display in the designer properly but when I run the app on emulator they don't display properly.
Also I am using normal 76 X 76 px PNG file images for appbar icons and they are not even displayed properly in the designer, they do not fit within the circle of the appbar icon, rather they try to escape the circle. I am attacking the image/screenshot from the emulator below, you can see and please tell me the solution. Thanks in advance
Image From Emulator
Image From Designer of visual studio
XAML Code For ApplicationBar
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
<shell:ApplicationBarIconButton IconUri="/Assets/AppBar/scan.png"
IsEnabled="True"
Text="Scan"/>
<shell:ApplicationBarIconButton IconUri="/Assets/AppBar/search.png"
IsEnabled="True"
Text="Search"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Application Resource for MainPage Icon TextBlocks
<phone:PhoneApplicationPage.Resources>
<ResourceDictionary >
<Style TargetType="TextBlock"
x:Key="MainPageIcon">
<Setter Property="FontSize"
Value="80" />
<Setter Property="Width"
Value="90" />
<Setter Property="FontFamily"
Value="/Resources/FontAwesome.otf#FontAwesome" />
<Setter Property="TextAlignment"
Value="Center" />
</Style>
</ResourceDictionary>
</phone:PhoneApplicationPage.Resources>
XAML for one of the icons on mainpage
<TextBlock Text="" Style="{StaticResource MainPageIcon}"/>
Actually, picture size doesn't matter. What's important - it's a transparent borders around actual icon. Add wide transparent borders around actual images and you'll be allset.
Incorrect image: https://i.stack.imgur.com/pNuJg.png
Correct image: https://i.stack.imgur.com/qPdRc.png
VS XAML designer screenshot: https://i.stack.imgur.com/9Jgpg.png
Emulator screenshot: https://i.stack.imgur.com/ZuCUE.png
Related
I'm making a ResourceDictionary of common styles that are used throughout my application and one of them is:
<Style x:Key="ME_BASE_AppbarButtonSaveStyle"
TargetType="AppBarButton">
<Setter Property="Label"
Value="Save" />
<Setter Property="ToolTipService.ToolTip"
Value="Save" />
<Setter Property="Icon">
<Setter.Value>
<FontIcon FontFamily="Segoe MDL2 Assets"
Glyph="" />
</Setter.Value>
</Setter>
</Style>
It's all ok if I apply the style only one AppbarButton on the Page, but if I want to have two buttons with the same style, I get the following error:
The parameter is incorrect
It's of ok (no error) if I remove the icon property out of the style...
But that's kind of missing the point...
Anyone experienced something similar? Perhaps...
Thank you for all the help.
Error HRESULT E_Fail has been returned from a call to a COM component.
This error will occurred when you use this style for the second AppBarButton. This error usually happens when a reference to a style or an event handler that does not exist or is not with the context of the XAML, you can see the exception information of your problem:
If you read this document: XAML resources must be shareable, you will find:
Custom types used as resources can't have the UIElement class in their inheritance, because a UIElement can never be shareable (it's always intended to represent exactly one UI element that exists at one position in the object graph of your runtime app).
Whether a Icon property of AppBarButton or a FontIcon derives from UIElement, so I guess this is the reason why can't this property be styled in the resource dictionary.
Besides, I will consider if this is a right direction to define the Icon property for each AppBarButton in the style, normally I'd like give each button a different icon as content.
But if you insist to do this, I can provide you a workaround method by defining the Content of the AppBarButton, this is the construction of your AppBarButton:
You use a FontIcon as the content of the AppBarButton, so we can modify your style like this:
<Style x:Key="ME_BASE_AppbarButtonSaveStyle" TargetType="AppBarButton">
<Setter Property="Label" Value="Save" />
<Setter Property="ToolTipService.ToolTip" Value="Save" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<FontIcon FontFamily="Segoe MDL2 Assets"
Glyph="" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
When using a listitem in a w8 app, how can I determine what gives the hover and click styles?
My listview looks like this:
<ListView x:Name="itemsListView"
TabIndex="1"
Visibility="Visible"
Padding="10,0,0,0" Foreground="Black"
ItemsSource="{Binding Nodes.Nodes}"
behaviors:ListViewItemClickedToAction.Action="{Binding SelectNodeAction}"
IsItemClickEnabled="True" FontFamily="Global User Interface"
>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When I hover using the mouse I get white letters and an almost white background.
I have tried reusing parts of the adventureworks shopper app, so there are styles from there copied. However, I can't understand what is applied to the ListView items.
You maybe already new this but if you check this screenshot you can see how you easily in VS2012 can create a copy of a built in style. When you press the "Edit a copy ..." a dialog will appear where you can choose where in the Project you want the style to be placed.
You can inherit styles. The inheritence of styles work in the following way:
<Style x:Name="BasicStyle" TargetType="Button">
<Setter Property="Background" Value="Green" />
</Style>
<Style x:Name="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BasicStyle}">
<Setter Property="Foreground" Value="Red" />
</Style>
You can do inheritence in several steps so Another button style can inherit the "ButtonStyle".
You can thus make a style that only contains the Template property if you want to seperate it or reuse the behaviour and look of your style. But you cannot split the Visual State Manager into several styles since if you inherit a style which sets the template property and then if you want to change the Hover state of that style you need to make a copy of the whole template and only change that part in the code.
I Think this would be a nice improvement by MS if you could make a style which only contains the pressed state and then Another style which only contains the hover effect and so on.
I hope this answers your questions :) I would love to answer more questions regarding XAML if you have any!
I am working on Panorama App for Windows Phone 8 and I have to add Foreground image with the background image.I have successfully added the background image but i don't know how to add foreground image in the same layout.Please help.
<phone:Panorama Title="My_app">
<phone:Panorama.Background>
<ImageBrush ImageSource="/My_app;component/Assets/texture.png"/>
</phone:Panorama.Background>
Using this code i am adding background image but don't know how to add foreground image.
I want to add image in the place of title "My_App" .
To set an image instead of a text as title on a panorama control, just add a style to the panorama with a custom title template. For example you can do this by adding the following to the xaml of the page containing the panorama (note: the dots represent any other code):
<phone:PhoneApplicationPage>
...
<phone:PhoneApplicationPage.Resources>
...
<Style TargetType="phone:Panorama" >
<Setter Property="TitleTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Image Source="Assets/logo.png" Stretch="None" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
...
</phone:PhoneApplicationPage>
Hope this helps!
First, add a PanoromaItem, then add an image to that item:
<phone:PanoramaItem>
<Grid>
<Image x:Name="MyImage" />
</Grid>
<phone:PanoramaItem>
I'm trying to implement autoscrolling and snapping to images in a windows phone 8 app
I currently have couple of images in a stackpanel inside a scrollviewer, and I'd like them to auto scroll horizontally every certain amount of time [5 seconds for example] while still being able to scroll and snap manually
this is what I have so far
<ScrollViewer x:Name="featuredScroll" Grid.Row="2" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" >
<StackPanel x:Name="featuredStack" Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="Image">
<Setter Property="Margin" Value="0,0,5,0"/>
</Style>
</StackPanel.Resources>
<Image Source="http://www.google.com/images/srpr/logo4w.png"/>
<Image Source="http://www.google.com/images/srpr/logo4w.png"/>
<Image Source="http://www.google.com/images/srpr/logo4w.png"/>
</StackPanel>
</ScrollViewer>
[images are placeholders]
so what I have now shows a scrollable list of those images [banners] which I can scroll horizontally, any idea how to achieve that ?
http://www.c-sharpcorner.com/UploadFile/5439e6/image-slideshow-using-dispatchtimer-in-windows-store-apps/
How about this option? This is example for Win store apps, but i don't see the reason why you couldn't rewrite it to WP
I want to disable Tile effect that is some kind of pushed effect and hover background color effect of ListView control, how can i do that?
Thanks
After some googling I found that the highlighting happens in the ListViewItemPresenter, which turns out to be pretty hidden. It's located inside the ControlTemplate of an ListViewItem, which is the ItemContainer for the ListView. The simplest way I've found to disable the effect is to simply override this ControlTemplate:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<TextBlock Text="List Item" />
...
<TextBlock Text="List Item" />
source: https://blog.jonstodle.com/uwp-listview-without-highlighting-and-stuff/
Look at this question:
Disable cross-slide selection for a listview
You can also make changes to the template to remove any visual states and adornments - go to the designer and right click your ListView/Edit Additional Templates/Edit Generated Item Container (ItemContainerStyle)/Edit a Copy... - that will extract the template you can modify using your preferred method.