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.
Related
I have to make a button with double borders as shown on the image bellow. Is there any way to make it with double border without adding additional xaml elements except the button.
On the latest versions of XF that should be fairly easy to do (make sure you optimize this code for your usage):
Create a border-style:
<Style TargetType="Border">
<Setter Property="Padding" Value="10" />
<Setter Property="Stroke" Value="Black" />
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="HorizontalOptions" Value="Fill"/>
<Setter Property="StrokeShape">
<Setter.Value>
<RoundRectangle CornerRadius="10" />
</Setter.Value>
</Setter>
</Style>
Once done use it as below:
<Border Stroke="Blue" StrokeThickness="5" Padding="8" BackgroundColor="White">
<Button BackgroundColor="Blue" Text="Submit"/>
</Border>
To add events to this whole view you might have to set the button's InputTransparent property to True and then add a Gesture to the whole View
Once done it would look like the image below:
I need to make some changes to a button's style, the problem is that, since the button is using the ButtonRevealStyle I can't change anything.
This is the code I tried to use:
<Button x:Name="Button1" Style="{StaticResource ButtonRevealStyle}">
<Button.Resources>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Transparent" />
</Button.Resources>
Is there a way to change the ButtonRevealStyle?
you can use BasedOn to Inherit your ButtonRevealStyle:
<Button x:Name="Button1">
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource ButtonRevealStyle}">
<Setter Property="Background" Value="Yellow"/>
...
</Style>
</Button.Style>
<Button.Resources>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Transparent" />
</Button.Resources>
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>
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! :)