Im playing around with styles, and want to set the background of the Grid, something like this:
<Style TargetType="Grid">
<Setter Property="Background" Value="Background.png" />
</Style>
But this does not work, what is the correct way... and how could I do it like I do it with classes in css as I want it to affect every Grid, the one the wraps the page?
You can set the background property directly like so.
<Grid x:Name="ContentPanel" Style="{StaticResource GridStyle1}">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="/BackgroundImage.png"/>
</Grid.Background>
</Grid>
If you want to create a style resource, you can set the value like so
<phone:PhoneApplicationPage.Resources>
<Style x:Key="GridStyle1" TargetType="Grid">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/BackgroundImage.png" Stretch="Fill"/>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid Style="{StaticResource GridStyle1}"/>
I recommend using Expression Blend to help you to discover how to work with styles. It will generate control templates for you so you can see how they are structured.
you can do it like this
<Grid x:Name="myGrid">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/myimage.png"/>
</Grid.Background>
</Grid>
Related
I'm trying to figure it out how to reuse a style (specifically the Data property) for a path that's on a Resource Dictionary.
Here's my problem:
ResourceDictionary.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Path" x:Key="FlashOn">
<Setter Property="Data">
<Setter.Value>
F1M376.251,632.755L385.665,632.755 381.302,646.07 394.618,646.07 389.11,660.302 393.01,660.302 381.531,672.93 377.398,660.763 381.073,660.763 383.829,652.268 369.825,652.268 376.251,632.755z
</Setter.Value>
</Setter>
<Setter Property="Fill" Value="#FFFFFF"></Setter>
<Setter Property="Stretch" Value="Fill"></Setter>
<Setter Property="Height" Value="25"></Setter>
<Setter Property="Width" Value="25"></Setter>
</Style>
</ResourceDictionary>
And trying to use it on a page like this:
<Path Style="{StaticResource FlashOn}"/>
or like this
System.Windows.Shapes.Path p = new System.Windows.Shapes.Path();
p.Style = Application.Current.Resources["FlashOn"] as Style;
The first time I load the page the shape will appear perfectly, BUT if I go back and then go again to that page the all the styles are available EXCEPT for the Data which does not have any information at all. So, I can stylize all the properties in a custom shape except for the Data property.
**Just to note, If the style is inline everything works. I just don't want to repeat code if I use the same path several times in the app.
<Path Width="25" Height="25" Stretch="Fill" Fill="#FFFFFF" Data="F1M376.251,632.755L385.665,632.755 381.302,646.07 394.618,646.07 389.11,660.302 393.01,660.302 381.531,672.93 377.398,660.763 381.073,660.763 383.829,652.268 369.825,652.268 376.251,632.755z" />
No sweat, just turn it into a Content Control;
<Style x:Key="MyAwesomePath" TargetType="ContentControl">
<!-- Add additional Setters Here -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Path Data="F1M376.251,632.755L385.665,632.755 381.302,646.07 394.618,646.07 389.11,660.302 393.01,660.302 381.531,672.93 377.398,660.763 381.073,660.763 383.829,652.268 369.825,652.268 376.251,632.755z"
Fill="#FFFFFFFF"
Stretch="Fill"
Height="25" Width="25"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Margin="{TemplateBinding Margin}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then invoke it;
<ContentControl Style="{StaticResource MyAwesomePath}"/>
This does a couple things for you, like not making your app re-draw the Path every instance so optimizes things. It also allows you (if you wanted/needed to) to bind dependency properties like Width/Height/Alignment/Margin or whatever you need to the template so you can specify them inline if you need to or you can keep them hard coded values like you have them. Hope this helps.
I am using listbox and wrappanel for displaying data.
For example:
<ListBox ItemTemplate="{StaticResource ItemTemplateListBoxAnimation}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemHeight="150" ItemWidth="150">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<DataTemplate x:Key="ItemTemplateListBoxAnimation">
<Grid Width="130" Height="130">
<Image Source="{Binding Image}"/>
</Grid>
</DataTemplate>
It's look like:
Now I need to use LongListSelector and grouping result:
<toolkit:LongListSelector ItemTemplate="{StaticResource ItemTemplateListBoxAnimation}">
<toolkit:LongListSelector.GroupItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</toolkit:LongListSelector.GroupItemsPanel>
</toolkit:LongListSelector>
But it's look like:
I need to get:
Your assumptions?
Thank you
The issue is that the GroupItemsPanel property is not changing the ItemsPanel of the main list, but rather the ItemsPanel of the group headers, as can be seen here (image from http://www.windowsphonegeek.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios):
Unfortunately the WP toolkit doesn't seem to expose the ItemsPanel that you want, so you'll have to modify the toolkit source to get the behavior that you want.
Get the source from here: https://phone.codeplex.com/SourceControl/changeset/view/80797
Unzip, open up the Microsoft.Phone.Controls.Toolkit.WP7.sln solution in Visual Studio.
Under the Microsoft.Phone.Controls.Toolkit.WP7 project, open Themes/Generic.xaml
Scroll down to the Style that applies to LongListSelector (TargetType="controls:LongListSelector")
Change the TemplatedListBox.ItemsPanel to a WrapPanel
<primitives:TemplatedListBox.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel/>
</ItemsPanelTemplate>
</primitives:TemplatedListBox.ItemsPanel>
Rebuild and reference the new dll, your items should wrap appropriately!
You can override it by using custom style
<toolkit:LongListSelector
Background="{StaticResource FCBackground}"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding NowShowingEvents}"
ItemTemplate="{StaticResource EventsListMediumItemTemplate}"
IsFlatList="True"
Style="{StaticResource LongListSelectorStyleCustom}"
>
</toolkit:LongListSelector>
<Style x:Key="LongListSelectorStyleCustom" TargetType="toolkit:LongListSelector">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:LongListSelector">
<toolkitPrimitives:TemplatedListBox x:Name="TemplatedListBox" Background="{TemplateBinding Background}">
<toolkitPrimitives:TemplatedListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</toolkitPrimitives:TemplatedListBox.ItemContainerStyle>
<toolkitPrimitives:TemplatedListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Margin="24,0,12,24"/>
</ItemsPanelTemplate>
</toolkitPrimitives:TemplatedListBox.ItemsPanel>
</toolkitPrimitives:TemplatedListBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I created a user control which applied the Style. After I applied the Style, the design view shows the error message "System.Reflection.TargetInvocationException". However, the application can run. Will it be a problem if I let this error on the page? How can I solve it?
There is the code on my user control:
<Button x: Name=btnDescription1" Click="btnDescription1_Click" Grid.Row="0"
Grid.Column="1" Style="{StaticResource btnDescription }" />
The code on myApp.xmal:
<Style x:Key="btnDescription" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<TextBlock Text="{TemplateBinding Content}" TextAlignment="Left" TextWrapping="Wrap"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try setting the target type of your control template:
<ControlTemplate TargetType="Button">
I am new on using Sliverlight. Hope someone can help me. I need the image buttons to show the order is on the complete or process status. The click event functions of these two are same to navigate the same page. Currently I created two customer Image Button on App.xaml because the Source of this image cannot do “TemplateBinding” ; the button doesn’t has this property. Is it a better way to do it? If so, would you provide the code or link, so I can learn from it? Thanks.
There is my code:
<Style x:Key="btnComplete" TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<Image Height="50" Width="120" Stretch="none" Source="../images/btnComplete.png"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The simplest way to achive this is to create a transparent controltemplate for the button and add image as content to the button anywhere you want.
The button code in your page will be like below.
<Button Height="100" Width="100" Style="{StaticResource TransparentButtonStyle}" Click="TwitterBtn_Click">
<Image Height="100" Source="YourIcon.png" Width="100"/>
</Button>
And the TransparentButtonStyle can be declared in App.xaml . Thats all!
<Style x:Key="TransparentButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here's an implementation of ImageButton for wp7. I've used this example and modified it for various things:
http://silvergeek.net/2011/01/14/imagebutton-control-for-win-phone-7/
Also you can check out the Codeing4Fun controls & source, specifically the buttons.
http://coding4fun.codeplex.com/
update: Telerik has an ImageButton control for wp7 now as well.
I'm sorry if the question title wasnt clear, but I'm trying to make something like this. I don't know if they are tiles or images inside a WrapControl:
I was thinking of making such thing with a wrap panel and each one of those blocks as a stackpanel. but I'm not sure if thats the right approach.
is there a control to do such thing?
You are on the right track. WrapPanel is the way to go :)
To make each block more interesting, you can take a look at the HubTile control from the latest windows phone toolkit. Whatever controls/panels you are using, just remember the size should be 173*173.
Use a ListBox
In one of my projects I created a ListBox that does all this. The reason that I use a ListBox is because ListBox has a SelectedItem propery which tells me which tile is tapped by the user. Also another reason is ListBoxItems can receive the nice tilt effect.
Baiscally you just need to create a tile-like ListBoxItem style and apply it to the ListBox's ItemContainerStyle, also you need to set the ListBox's ItemsPanel to be a WrapPanel.
How it looks
The ListBoxItem Style
<Style x:Key="TileListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="FontSize" Value="64"/>
<Setter Property="Margin" Value="12,12,0,0"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="173"/>
<Setter Property="Height" Value="173"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The ListBox
<!-- set its ItemContainerStyle which is the style for each ListBoxItem -->
<ListBox ItemContainerStyle="{StaticResource TileListBoxItemStyle}">
<!-- set its ItemsPanel to be a WrapPanel -->
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>
<Grid>
<TextBlock Text="Messages" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path Data="M1.4901163E-05,9.8579922 L50.000015,46.316994 L100.00002,9.8579922 L100.00002,62.499992 L1.4901163E-05,62.499992 z M0,0 L100,0 L50,36.458 z" Fill="White" Height="38.125" Stretch="Fill" UseLayoutRounding="False" Width="61" d:IsLocked="True" />
<TextBlock Text="12" Margin="4,0,0,8" />
</StackPanel>
</Grid>
</ListBoxItem>
<ListBoxItem/>
<ListBoxItem/>
<ListBoxItem/>
<toolkit:HubTile Title="Me ☺" Message="..." Notification="new messages!" Source="xxx.jpg" Margin="12,12,0,0" />
</ListBox>
You can see the last item is actually a HubTile.
Hope ths helps! :)