I have a few pages and want that they use one style. See in images, for example. as you can see all three pages have static styled header. So how i can do it?
Sorry if the question is easy, it's in the evening and i can't think very clear, and been working really hard...
I tried setting Template, but i keep getting an exception, that i cannot use templating for UserControl...
Why can't using like following?
<phone:PhoneApplicationPage.Style>
<Style TargetType="phone:PhoneApplicationPage">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:PhoneApplicationFrame">
<StackPanel Background="Black">
<Border Height="100" Width="100" Background="Red"/>
<ContentPresenter />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Style>
You could create a UserControl that includes a StackPanel, with a horizontal orientation, then add two controls inside the StackPanel, maybe an Image and a TextBlock, add margins as required, add colours as required. Once your UserControl is defined, add this UserControl to all the pages what you want to have the same look and feel. You might even be able to move this UserControl to a base page and derive your pages from this base page.
Hope this helps.
Related
I am facing a problem when I try to load a resource style from file to a UIElement.
My Resource file contains a copy of ToggleSwitch's default style, I changed just some colors.
I tried the following Resource references:
<Page.Resources>
<ResourceDictionary x:Key="GreenToggleResourceDictionary">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="GreenToggleSwitch.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
And my ToggleSwitch looks like this but it won't use the style in the referenced resource "GreenToggleSwitch.xaml":
<ToggleSwitch x:Name="ToggleSwitch"
Style="{StaticResource GreenToggleSwitchStyle}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Toggled="ToggleSwitch_Toggled"
</ToggleSwitch>
This is the GreenToggleSwitch.xaml, it's pretty much the ToggleSwitch default template:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CUE">
<x:Double x:Key="ToggleSwitchOnStrokeThickness">0</x:Double>
<Style TargetType="ToggleSwitch" x:Key="GreenToggleSwitchStyle">
.
.
.
</Style>
</ResourceDictionary>
This code won't work, because of the Style 'GreenToggleSwitch' that I want to use.
How has the code to be like to work?
Basically I want to change the blue coloring around the toggle thumb(/knob) to green. If I put the code from my Resource file into my MainPage.xaml, it will work.
Appreciate your help,
Viktor
Right, a resource dictionary isn't a style. What is the x:Key property of the style you want? Use that. If it's x:Key="Planxty", use Style="{StaticResource Planxty}". If it's x:Key="ImALittleTeapot", use Style="{StaticResource ImALittleTeapot}".
If it doesn't have a key, it's the implicit style and it should apply without any further effort on your part.
Secondly, you should merge the dictionary you're loading into the dictionary in your window/page/usercontrol/whatever.
Like so:
<Page.Resources>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="GreenToggleSwitch.xaml"/>
</ResourceDictionary.MergedDictionaries>
</Page.Resources>
Update
GreenToggleSwitchResource isn't defined anywhere. The XAML parser will not try to guess your intent when you throw weird random strings at it. It will say "Dammit, Jim, I'm a parser, not a parapsychologist!"
Use the identifier that you defined. This is programming. We call things by the identifiers we give them. You called it GreenToggleSwitchStyle. So that's how you refer to it.
<ToggleSwitch x:Name="ToggleSwitch"
Style="{StaticResource GreenToggleSwitchStyle}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Toggled="ToggleSwitch_Toggled"
</ToggleSwitch>
I don't know what you're getting at with all the theme stuff and you didn't say, so I didn't address that.
I want to create a control which displays an image and a watermark (image or something else) on it.
But the watermark should be loaded from another XAML file in order to let people custom the way the watermark will appear : alignment, opacity, size, nature of the watermark (TextBlock, Image, ...).
For instance I could load my watermark with this appearance
<Border BorderThickness="5" BorderBrush="Aqua" Width="50" Height="50">
<Image Source="play.png" />
</Border>
This code is from my Themes/generic.xaml and MyWatermarkControl (inherits from Control) is the class which contain the code of the control (dependency properties).
<Style TargetType="local:MyWatermarkControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyWatermarkControl">
<Grid>
<Image Source="{TemplateBinding ImagePath}" />
<Image x:name="watermark" Source="play.png" /> <!--I want this to be loaded from another .xaml-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My search results lead me to add in my ControlTemplate stuff like ContentPresenter, ContentTemplate, DataTemplate : so many results and I cannot understand how do they work but the fact they are nested
You can add a Source property to your MyWatermarkControl then bind the Source property of your embedded Image to this property. For more details see the following tutorial that I wrote:
A Simple Pattern for Creating Re-useable UserControls in WPF / Silverlight
I have created a listbox which has a horizontal orientation. When I load the content, in the stackpanel the size of stackpanel will automatically adjust to the size of the content stored inside. How do I achieve this in a listbox?
This is my listboxcode in XAML:
<ListBox Name="WebScrollView"
Grid.Row="2"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
SelectionMode="Multiple"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Height" Value="Auto" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top"
HorizontalAlignment="Center"
/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
WebBrowser is a very expensive control for both CPU and memory. Creating a separate instance of a WebBrowser for each item in a ListBox seems like a bad idea for that reason alone. I suggest that you use the Html Agility Pack to extract the fields you want and bind them into TextBlocks and other controls. You'll also gain much greater control over the display of each item.
http://htmlagilitypack.codeplex.com/
I'm developing a Windows Phone 7 app. I'm very new on it.
I've seen here a panorama control with some pictures (at panorama item Samples).
I want to do that but I don't know how.
How can I do that with a listbox and a DataItemTemplate? Or is there any other way to do that?
I will have and XML with a list of URLs. I will add as many images as urls I will have in XML.
But my problem is how can I fill that kind of matrix?
If you don't understand anything, please tell me.
That particular sample is a handcrafted copy of the panorama control.
The easiest way to understand it is probably to download it and take a look - see the source code for that particular pictures section in the "samples" PanoramaItem in http://phone.codeplex.com/SourceControl/changeset/view/55041#820130 - you can see it is done using a ListBox sytled with their style PanoramaImageListBox:
The List Box:
<ListBox x:Name="listBox2"
HorizontalAlignment="Left"
Width="600"
ItemsSource="{Binding Source={StaticResource PicturesLoader}, Path=Pictures}"
Style="{StaticResource PanoramaImageListBox}"
SelectionChanged="listBox_SelectionChanged"/>
The Style:
<Style x:Key="PanoramaImageListBox" TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<my:MultiColumnsPanel Columns="3"
HorizontalAlignment="Left"
VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Image Width="185" Margin="0,0,12,12"
Source="{Binding Bitmap}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
You can see this style uses their own class - MultiColumnPanel - see code at http://phone.codeplex.com/SourceControl/changeset/view/55041#820131
I'm trying to design some UserControl classes in Blend 3. I want parts of them to be "collapsed" when created at runtime, but I want to be able to edit their component parts without fiddling with code every time I want to build.
It works with sample datasources, as the following example illustrates. But it doesn't appear to work with other properties... or am I doing something wrong?
With a sample data source SDS_AIVertexAction We can do this in Expression Blend:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
...>
<Grid x:Name="LayoutRoot"
d:DataContext="{Binding Source={StaticResource SDS_AIVertexAction}}" >
...
</Grid>
But it does not seem to be possible to do this:
<Label Content="{Binding Name}" Visibility="Collapsed" d:Visibility="Visible" />
I realise I could change visibility "on loaded" but I'd really rather not type all that guff every time I make a control like this. Does someone know a secret that lets us do this?
Well, here's a guess.
The d: namespace is for stuff that is respected at design time but ignored at runtime. So we want to set the visibility somehow within the d: namespace where it overrides visibility set for runtime.
Inline styles override styles set globally or via StaticResource, so I'd suggest doing this (from memory--don't just copy and paste it, understand the concept):
<UserControl.Resources>
<Style x:Key="invisible" TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</UserControl.Resources>
<!-- ... -->
<Label Style="{StaticResource invisible}" d:Visibility="Visible" />