A designer did some work and styled the Telerik RadWinodow for Silverlight. He wasn't able to figure this out and I'm having trouble with it too.
It looks like he applied a style to the WindowInnerBorder template. It adds a button and some effects.
I believe this is the style, it is applied to a Grid contained in the WindowInnerBorder of the RadWindowTemplate:
<Style x:Key="MainLabelRibbon" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Path Data="M -1,-1 C-1,-1 500,-1 500,-1 500,-1 456,43 456,43 456,43 43,43 43,43 43,43 -1,-1 -1,-1 z" Opacity="1" Stretch="Fill" Stroke="White" StrokeThickness="1" UseLayoutRounding="False">
<Path.Effect>
<DropShadowEffect Direction="275" BlurRadius="7" ShadowDepth="7" Opacity="0.3"/>
</Path.Effect>
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FF029D05" Offset="0.834"/>
<GradientStop Color="#FF0ECA0E" Offset="0.432"/>
<GradientStop Color="#FF026C02" Offset="0.983333"/>
<GradientStop Color="#FF04A906" Offset="0.008"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<UserControl FontSize="18.667" FontFamily="{StaticResource MainFontFamily}" FontWeight="Bold" Foreground="White" Margin="0,-3,0,3">
<UserControl.Effect>
<DropShadowEffect Direction="296" ShadowDepth="2" BlurRadius="3"/>
</UserControl.Effect>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</UserControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Which looks like this:
My question is, what do I need to do or is it possible to make the windows draggable when clicking on the label?
Inside the RadWindow style, there is a Thumb control which makes the window draggable. I think your designer replaced it with a Button control and that's why it is not working. Also, using a Button here doesn't make any sense.
To fix it is very simple. Instead of applying this style to a Button, you can change the TargateType to point to a Thumb. And then inside the style, replace the Button control with a Thumb control.
Hope this helps. :)
Related
I have a button that uses my own theme by using style= I want the theme code to pick up and use the Background color property but everything I've tried always fetches black #000000 from the XAML code.
I use it like this:
<Button Background="#844eff" Style="{StaticResource PosButtonTheme}" Content="Return
Sale" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,44,0,0" />
My theme code looks like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style BasedOn="{StaticResource {x:Type Button}}"
TargetType="{x:Type Button}"
x:Key="PosButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<StackPanel
Margin="0,0,0,0">
<Border Width="62" Height="62">
<Border.Background>
<LinearGradientBrush StartPoint ="0,0" EndPoint ="1,2">
<GradientStop Color= "{TemplateBinding Property=Background}" Offset="0.0"/>
<GradientStop Color= "#FFFFAF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.Clip>
<RectangleGeometry RadiusX="7" RadiusY="10" Rect="0,0,62,62"/>
</Border.Clip>
<Grid>
<StackPanel>
<TextBlock Text= "{TemplateBinding Property=Content}" TextAlignment="Center" Foreground="White" FontSize="14" FontFamily="Barlow Semi Condensed SemiBold" FontWeight="SemiBold" Margin=" 0,15,0,0"/>
</StackPanel>
</Grid>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
The "{TemplateBinding Property=Content}" works fine in the TextBlock but "{TemplateBinding Property=Background}" seems to do nothing its always black or #000000
Any ideas?
You code is ok, so I think you miss to set the BackGround property.
This is what I tried:
Background = Brushes.Red;
and then
Background = Brushes.Blue;
if this not work for you check this https://stackoverflow.com/a/6748306/3464775
I have simple example and databinding using TemplatedParent is not working. Does anyone have idea what is wrong?
<Button Background="Red" Content="xD">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border>
<i:Interaction.Triggers>
<ec:DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background}" Value="Red">
<ec:ChangePropertyAction PropertyName="Background" Value="CadetBlue"/>
</ec:DataTrigger>
</i:Interaction.Triggers>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
No error in output. Background is supposed to be set to CadetBlue but no effect is applied.
It seems that RelativeSource.TemplatedParent works fine inside a template, but the triggers don't work as expected: if the trigger condition matches initially, the trigger/action doesn't fire. If you change the bound property programmatically, the trigger will fire. That's why it works with IsPressed: the button didn't start out pressed; it was pressed after it was loaded.
If you move the triggers out of the template and attach them directly to the button and adjust the bindings accordingly, everything should just work:
<Button x:Name="_button"
Background="Red"
Content="xD">
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding ElementName=_button, Path=Background.Color}"
Value="Red">
<ei:ChangePropertyAction PropertyName="Background"
Value="CadetBlue" />
</ei:DataTrigger>
</i:Interaction.Triggers>
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Note the background trigger must bind to Background.Color; it doesn't work if you bind to the brush itself, possibly because SolidColorBrush does not override Equals.
In a Windows 8 (WinRT) app, I am creating my own XAML style to get a dotted rectangle. In the setter for the style, I use Property="StrokeDashArray" Value="1,4". I then create a bunch of rectangles, and then explicitly set the style of those rectangles to this style I created. The first rectangle shows up with a dotted border - but the other two don't. However, if in addition to the Style={StaticResource myDottedStyle} I also specify the StrokeDashArray with each rectangle, then all them correctly show up with dotted borders.
Why is the dotted border only showing up for the first rectangle? How can I create a Style that is applied to all the rectangles without specifying the StrokeDashArray for each of them?
Here is a full code sample. In Windows 8 RTM, create a Blank XAML app project, and replace the Grid in the MainPage.xaml with the following:
<Page.Resources>
<Style x:Key="myDottedStyle" TargetType="Rectangle">
<Setter Property="Stroke"
Value="{StaticResource ApplicationForegroundThemeBrush}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeDashArray" Value="1,4"/>
</Style>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Rectangle Style="{StaticResource myDottedStyle}" Width="40"
HorizontalAlignment="Left"/>
<Rectangle Style="{StaticResource myDottedStyle}" Width="40"
HorizontalAlignment="Center"/>
<Rectangle Style="{StaticResource myDottedStyle}" Width="40"
HorizontalAlignment="Right"/>
</Grid>
Here is a screenshot of the output of this
I found a related question that talks about DataTemplates here but I can't figure out how to translate that into my problem.
You could optimize things a bit by not requiring it to re-draw the rectangle per each instance and substitute for a ContentControl instead since they appear the same but with minor differences. So something for example like;
<Style x:Key="MyDottedStyle" TargetType="ContentControl">
<!-- Add additional Setters Here -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Rectangle Stroke="{StaticResource ApplicationForegroundThemeBrush}"
StrokeThickness="2"
StrokeDashArray="1,4"
Width="40" Height="40"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Margin="{TemplateBinding Margin}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- And now actually place it on your view -->
<ContentControl Style="{StaticResource MyDottedStyle}" HorizontalAlignment="Center"/>
This will allow you to not only clean things up because you can take your Style template and slap it over into say a Resource Dictionary to reduce clutter, but also makes it a little more efficient since you're not re-drawing your shape every time it's required. Hope this helps! Cheers!
UPDATE: I moved the TextBox's style to the phone:PhoneApplicationPage.Resources tag and it behaves exactly the same way so it turns out that is not the fact the I am using a ResourceDictionary what is causing the problem but that there is something wrong with the way I am defining the style.
I just started playing around with ResourceDictionaries and I really like them but when I tried to use them on my application everything stopped working.
First the following TextBox:
<TextBox Grid.Column="1"
Grid.Row="0"
x:Name="Value"
InputScope="Number"
TextAlignment="Right"
TextChanged="OnValueTextChanged">
<TextBox.Style>
<StaticResource ResourceKey="InputTextBox" />
</TextBox.Style>
</TextBox>
Update: I have updated the ResourceDictionary per XAMeLi's answer and now I see the borders but it would seem as the TextBox does not have any background but, when I click on it nothing happens as if the TextBox is not even there. Then by pure luck I noticed that if I click on the bottom border the numeric keyboard would pop up as if the TextBox is too small or hiding below the border element. I tried modifying the TextBox height to no avail. This is driving me crazy.
Then the ListPickers are even worse:
<toolkit:ListPicker
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="1"
x:Name="CategoriesPicker"
HeaderTemplate="{StaticResource ListPickerHeaderTemplate}"
FullModeItemTemplate="{StaticResource CategoriesPickerTemplate}"
ExpansionMode="FullScreenOnly"
BorderThickness="0"
Padding="0"
Margin="0"
SelectionChanged="OnCategoriesPickerSelectionChanged">
<toolkit:ListPicker.Style>
<StaticResource ResourceKey="ListPickersStyle"/>
</toolkit:ListPicker.Style>
</toolkit:ListPicker>
When the Style is in it won't even bind the data I'm giving to it.
The file with the ResourceDictionary looks like this:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">
<Style x:Name="InputTextBox" TargetType="TextBox">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="-12"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
<GradientStop Color="DarkGray" Offset="0"/>
<GradientStop Color="DarkGray" Offset=".3"/>
<GradientStop Color="LightSlateGray" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border
BorderThickness="2"
Margin="15"
CornerRadius="3">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
<GradientStop Offset="0" Color="DarkGray"></GradientStop>
<GradientStop Offset="0.3" Color="DarkGray"></GradientStop>
<GradientStop Offset="1" Color="LightSlateGray"></GradientStop>
</LinearGradientBrush>
</Border.BorderBrush>
<Border
BorderThickness="2"
CornerRadius="3">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="1 1" EndPoint="1 0">
<GradientStop Offset="1" Color="Gray"></GradientStop>
<GradientStop Offset="0.3" Color="DarkGray"></GradientStop>
<GradientStop Offset="0" Color="DarkGray"></GradientStop>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Name="ListPickersStyle" TargetType="toolkit:ListPicker">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ListPicker">
<Border
BorderThickness="2"
Padding="0"
Margin="10"
CornerRadius="3"
Background="DarkGray">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
<GradientStop Offset="0" Color="DarkGray"></GradientStop>
<GradientStop Offset="0.3" Color="DarkGray"></GradientStop>
<GradientStop Offset="1" Color="LightSlateGray"></GradientStop>
</LinearGradientBrush>
</Border.BorderBrush>
<Border BorderThickness="2"
CornerRadius="3">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="1 1" EndPoint="1 0">
<GradientStop Offset="1" Color="Gray"></GradientStop>
<GradientStop Offset="0.3" Color="DarkGray"></GradientStop>
<GradientStop Offset="0" Color="DarkGray"></GradientStop>
</LinearGradientBrush>
</Border.BorderBrush>
<toolkit:ListPicker
BorderThickness="0"
Padding="0"
Margin="0">
<toolkit:ListPicker.Background>
<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
<GradientStop Offset="0" Color="DarkGray"></GradientStop>
<GradientStop Offset="0.5" Color="DarkGray"></GradientStop>
<GradientStop Offset="1" Color="LightSlateGray"></GradientStop>
</LinearGradientBrush>
</toolkit:ListPicker.Background>
</toolkit:ListPicker>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Please, somebody explain to me what am I doing wrong.
Inside your ControlTemplates there are the controls them selves, i.e. control template for text box is holding a TextBox. This is not how control templates should be used. Use Blend or VS11 to extract the default style for each control (I'd recommend doing it in a new clean solution) and then change the visual appearance.
You should be able to reference the style just like any other property, e.g.:
<TextBox Style="{StaticResource InputTextBox}"/>
And try setting your Style first, then any settings you want to override, e.g.:
<TextBox Style="{StaticResource InputTextBox}" TextAlignment="Right" />
You should use x:Key instead of x:Name in ResourceDictionary:
x:Key and x:Name are not identical concepts. x:Key is used exclusively
in resource dictionaries. x:Name is used for all areas of XAML. A
FindName call using a key value will not retrieve a keyed resource.
However, Silverlight 5 can use an x:Name (or Name) attribute as the
substitute resource key for a resource item if no x:Key exists on the
item.
and as soon as Windows Phone is far from Silverlight 5, you can not use x:Name in the dictionary.
I want to have the ListItems to extend with their orange background the full width of the Listbox.
Currently they are only as wide as the FirstName + LastName.
I've set every element I can to: HorizontalAlignment="Stretch".
I want the background of the ListboxItems to expand as the user stretches the Listbox so I don't want to put in absolute values.
What do I have to do so that the background color of the ListBoxItems fill the width of the ListBox?
<Window x:Class="TestListBoxSelectedItemStyle.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestListBoxSelectedItemStyle"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<local:CustomerViewModel x:Key="TheDataProvider"/>
<DataTemplate x:Key="CustomerItemTemplate">
<Border CornerRadius="5" Background="Orange" HorizontalAlignment="Stretch" Padding="5" Margin="3">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Width="Auto">
<TextBlock HorizontalAlignment="Stretch">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} {1}">
<Binding Path="FirstName"/>
<Binding Path="LastName"/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding Path=GetAllCustomers, Source={StaticResource TheDataProvider}}"
ItemTemplate="{StaticResource CustomerItemTemplate}"/>
</Grid>
</Window>
I found another solution here, since I ran into both post...
This is from the Myles answer:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
This worked for me.
I'm sure this is a duplicate, but I can't find a question with the same answer.
Add HorizontalContentAlignment="Stretch" to your ListBox. That should do the trick. Just be careful with auto-complete because it is so easy to get HorizontalAlignment by mistake.
If your items are wider than the ListBox, the other answers here won't help: the items in the ItemTemplate remain wider than the ListBox.
The fix that worked for me was to disable the horizontal scrollbar, which, apparently, also tells the container of all those items to remain only as wide as the list box.
Hence the combined fix to get ListBox items that are as wide as the list box, whether they are smaller and need stretching, or wider and need wrapping, is as follows:
<ListBox HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
(credits for the scroll bar idea)
Since the border is used just for visual appearance, you could put it into the ListBoxItem's ControlTemplate and modify the properties there. In the ItemTemplate, you could place only the StackPanel and the TextBlock. In this way, the code also remains clean, as in the appearance of the control will be controlled via the ControlTemplate and the data to be shown will be controlled via the DataTemplate.
The fix for me was to set property HorizontalAlignment="Stretch" on ItemsPresenter inside ScrollViewer..
Hope this helps someone...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch">
<ItemsPresenter Height="252" HorizontalAlignment="Stretch"/>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
I also had the same problem, as a quick workaround, I used blend to determine how much padding was being added. In my case it was 12, so I used a negative margin to get rid of it. Now everything can now be centered properly