I am wanting to change the foreground colour of a Silverlight ToggleSwitch, although when i open the object in ExpressionBlend i have no object items to edit.
How is this done? (without rebuilding OR using reflector)?
I am not quite sure what you are doing wrong in Blend, however, you can see the template for the ToggleSwitch if you look at the sourcecode for ToggleSwitch here:
http://silverlight.codeplex.com/SourceControl/changeset/view/61620#1325059
Ignoring the storyboards / VisualStateManager, the control has the following markup:
<Grid x:Name="SwitchRoot" Background="Transparent" Height="95" Width="136">
<Grid x:Name="SwitchTrack" Width="88">
<Grid x:Name="SwitchBottom" Background="{TemplateBinding SwitchForeground}" Height="32">
<Rectangle
x:Name="SwitchBackground"
Fill="{TemplateBinding Background}"
Width="76"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="BackgroundTranslation"/>
</Rectangle.RenderTransform>
</Rectangle>
<Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="2">
<Border BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="4"/>
</Border>
</Grid>
<Border
x:Name="SwitchThumb"
BorderBrush="{StaticResource PhoneBackgroundBrush}"
BorderThickness="4,0"
Margin="-4,0"
Width="28"
Height="36"
HorizontalAlignment="Left">
<Border.RenderTransform>
<TranslateTransform x:Name="ThumbTranslation"/>
</Border.RenderTransform>
<Border
x:Name="ThumbCenter"
BorderBrush="{StaticResource PhoneForegroundBrush}"
BorderThickness="2"
Background="White"/>
</Border>
</Grid>
</Grid>
I would suggest using a different colour where the resource PhoneForegroundBrush is used.
I think you will need to define a new Template for the control and then change your style as you see fit.
You can do this by right clicking on your control and select Edit Template and then create your Edit a Copy. This will create a new Style for you that you can change.
Related
I want to have different color to each side of a border in WPF XAML. How can i do this.
<Border BorderThickness="1,2,3,4" BorderBrush="Blue"></Border>
A bit hacky, but it works.
<Grid>
<Border BorderThickness="1,0,0,0" BorderBrush="Blue"/>
<Border BorderThickness="0,2,0,0" BorderBrush="Red"/>
<Border BorderThickness="0,0,3,0" BorderBrush="Green"/>
<Border BorderThickness="0,0,0,4" BorderBrush="Orange"/>
</Grid>
Probably better to create your own Decorator.
Maybe?
<DockPanel LastChildFill="True">
<Rectangle Fill="Red" DockPanel.Dock="Top" Height="2"/>
<Rectangle Fill="Yellow" DockPanel.Dock="Left" Width="2"/>
<Rectangle Fill="Green" DockPanel.Dock="Right" Width="2"/>
<Rectangle Fill="Blue" DockPanel.Dock="Bottom" Height="2"/>
<Rectangle Fill="Wheat"/>
</DockPanel>
There is a hacky way that using four Border https://stackoverflow.com/a/1797045/5229294
<Border BorderThickness="0,0,0,10" BorderBrush="Green">
<Border BorderThickness="0,0,10,0" BorderBrush="Blue">
<Grid>
<Button>Hello</Button>
</Grid>
</Border>
</Border>
I was wondering if anyone had an example of how to style/template a combobox to only show a button at its default initial state. Kind of like the DropDownButton gallery for the ribbon bar. I would just like the user to be able to click a button and have the combobox items listed. When the selection is made it does not save the selected item in the text field because there is no text field only a button. Thanks :)
Here's some sample code:
Note that the ContentPresenter and PART_EditableTextBox have been commented out deliberately and they can be taken off from the template.
Also, you may want to customize the appearance of togglebutton and the popup.
<Window x:Class="HiddenTextComboBox.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<ControlTemplate x:Key="HiddenTextComboBox" TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton x:Name="DropDownToggle"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="-1" HorizontalContentAlignment="Right"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}">
<Path x:Name="BtnArrow" Height="4" Width="8"
Stretch="Uniform" Margin="0,0,4,0" Fill="Black"
Data="F1 M 300,-190L 310,-190L 305,-183L 301,-190 Z " />
</ToggleButton>
<!--<ContentPresenter x:Name="ContentPresenter" Margin="6,2,25,2"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Focusable="False"
Background="{TemplateBinding Background}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,23,3"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>-->
<Popup x:Name="PART_Popup"
IsOpen="{TemplateBinding IsDropDownOpen}">
<Border x:Name="PopupBorder"
HorizontalAlignment="Stretch" Height="Auto"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="Black" Background="White" CornerRadius="3">
<ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<ComboBox Height="23" Width="23" Template="{StaticResource HiddenTextComboBox}">
<ComboBoxItem>First</ComboBoxItem>
<ComboBoxItem>Second</ComboBoxItem>
<ComboBoxItem>Third</ComboBoxItem>
</ComboBox>
</Grid>
</Window>
Code adapted from: Customizing the Appearance of an Existing Control by Creating a ControlTemplate
I'm following a code sample that has this xaml, but how can I construct this programmatically and add it to a canvas?
<custom:BalloonDecorator Background="{StaticResource MessageOutBackground}" PointerLength="10"
CornerRadius="5" Margin="10,0,0,0"
HorizontalAlignment="left">
<Border Background="{StaticResource Hilight}" CornerRadius="5">
<Border Background="{StaticResource HilightBottom}"
CornerRadius="5">
<TextBlock Text="Hello" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Border>
</Border>
</custom:BalloonDecorator>
Make it a resource of the window (or something else):
<Window.Resources>
<custom:BalloonDecorator x:Key="MyDecorator" Background="{StaticResource MessageOutBackground}" PointerLength="10"
...
</custom:BalloonDecorator>
</Window.Resources>
Then get it in code like this:
BalloonDecorator myDecorator = FindResource("MyDecorator") as BalloonDecorator;
I'm using a Separator to draw a vertical line inside a Border. At first this was ok because the line needed to be centered, but now I need to position it at a custom x-position from the left border. Is there a way to do that?
<Border x:Name="border" ClipToBounds="True" Background="White" BorderBrush="Black" BorderThickness="2">
<Separator BorderBrush="Black" BorderThickness="2">
<Separator.LayoutTransform>
<RotateTransform Angle="90" />
</Separator.LayoutTransform>
</Separator>
</Border>
I'm not sure of the proper way, if availble, but if you are not resizing the border, you could use a margin like this:
<Border x:Name="border" ClipToBounds="True" Background="White" BorderBrush="Black" BorderThickness="2">
<Separator BorderBrush="Black" BorderThickness="2" Height="2" Margin="0,0,100,0">
<Separator.LayoutTransform>
<RotateTransform Angle="90" />
</Separator.LayoutTransform>
</Separator>
</Border>
The simplest change you can make is just to set the HorizontalAlignment and then use Margins to offset the Separator (the default is 0,2,0,2):
<Border x:Name="border" ClipToBounds="True" Background="White" BorderBrush="Black" BorderThickness="2">
<Separator BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Left" Margin="20,2,0,2" >
<Separator.LayoutTransform>
<RotateTransform Angle="90" />
</Separator.LayoutTransform>
</Separator>
</Border>
There are lots of other ways you could achieve the same visual effect if you have other requirements.
Whenever I set the Border.Effect property to a drop shadow effect every control contained within the control has a drop shadow.
Is there a way to set the shadow just to the border and not every control contained in the border?
Here is a short example of my code:
<Grid>
<Border Margin="68,67,60,67" BorderBrush="Black" BorderThickness="1" CornerRadius="10">
<Border.Effect>
<DropShadowEffect/>
</Border.Effect>
<Rectangle Fill="White" Stroke="Black" Margin="37,89,118,98" />
</Border>
</Grid>
Two choices:
Option 1: Add a border element with the effect on it as a sibling of the border / rectangle element tree you have. Something like this:
<Grid>
<Border Margin="68,67,60,67"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="10">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
</Border>
<Border Margin="68,67,60,67"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="10">
<Rectangle Fill="White"
Stroke="Black"
Margin="37,89,118,98">
</Rectangle>
</Border>
</Grid>
Option 2: Put the rectangle as a sibling of the border element like this:
<Grid>
<Border Margin="68,67,60,67"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="10">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
</Border>
<Rectangle Fill="White"
Stroke="Black"
Margin="37,89,118,98">
</Rectangle>
</Grid>
NOTE: You will have to tweak the layout on the second solution to make the rectangle line up where you want it
I realise that your question has an answer, but it doesn't appear to have the simplest answer. The simplest answer to your question is for you to just colour the background of the control that you set the shadow on. Like so:
<Grid>
<Border Margin="68,67,60,67" Background="White" BorderBrush="Black"
BorderThickness="1" CornerRadius="10">
<Border.Effect>
<DropShadowEffect/>
</Border.Effect>
<Rectangle Fill="White" Stroke="Black" Margin="37,89,118,98" />
</Border>
</Grid>
And the result:
I tried going for a similar design to this toolbar in white:
This is what I used:
<Border CornerRadius="8" Background="White" Grid.Row="1">
<Border.Effect>
<DropShadowEffect ShadowDepth="3" Opacity="0.2"/>
</Border.Effect>
</Border>