ComboBox ControlTemplate Drop Down Button - wpf

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

Related

WPF Disable mousewheel on ScrollViewer and let children handle it

I am trying to implement an ItemsControl which contains a collection of graphing components. The component should be able to use the MouseWheel event to zoom, but it appears that the Scrollbar is capturing and handling the event first. Most of the articles I have found here and here speak to letting parents handle the wheel, but I need the child to handle the wheel, and I can't figure out the right hooks. Here is my TiledGrid, which is an ItemsControl at its core:
<ItemsControl x:Class="Grapes.Common.Controls.TiledGrid.TiledGrid"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Grapes.Common.Controls.TiledGrid"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" x:Name="itemsGrid"
ScrollViewer.CanContentScroll="True" >
<!--ItemTemplate="{Binding ItemTemplate}"-->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1"
Padding="3" Margin="3" >
<HeaderedContentControl
HeaderTemplate="{Binding HeaderTemplate,ElementName=itemsGrid}" Header="{Binding}"
ContentTemplate="{Binding ItemTemplate,ElementName=itemsGrid}" Content="{Binding}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
>
<HeaderedContentControl.Template>
<ControlTemplate TargetType="HeaderedContentControl">
<DockPanel>
<ContentPresenter DockPanel.Dock="Top" ContentSource="Header" />
<ContentPresenter />
</DockPanel>
</ControlTemplate>
</HeaderedContentControl.Template>
</HeaderedContentControl>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:UniformGridPanel Rows="{Binding RowCount,ElementName=itemsGrid}"
Columns="{Binding ColumnCount,ElementName=itemsGrid}"
>
</local:UniformGridPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate>
<Border
BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True">
<ScrollViewer
Padding="{TemplateBinding Control.Padding}"
Focusable="False" FlowDirection="RightToLeft" CanContentScroll="True" SnapsToDevicePixels="True"
>
<ItemsPresenter FlowDirection="LeftToRight">
</ItemsPresenter>
</ScrollViewer>
</Border>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
What can I do to stop the ScrollViewer in the ItemsControl.Template from handling the MouseWheel event?
Thanks in Advance!
Mike.

WPF MediaElement with rounded corner

In WPF, i wish to create rounded corner for my movie, but the movie actually will overlap the border and i get a normal rectangle box that load my movie. Any idea how to solve this issue?
<Border BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="20,20,20,20">
<Grid>
<MediaElement x:Name="movieLoader" HorizontalAlignment="Left" Height="128" VerticalAlignment="Top" Width="236" Source="../video/empty.mp4"/>
</Grid>
</Border>
Try this:
<Border x:Name="border" BorderThickness="1" BorderBrush="#FF000000" CornerRadius="20" Padding="1"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Border Name="mask" Background="White" CornerRadius="{Binding ElementName=border, Path=CornerRadius}"/>
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</Grid.OpacityMask>
<MediaElement x:Name="movieLoader" HorizontalAlignment="Left" Height="128"
VerticalAlignment="Top" Width="236" Source="../video/empty.mp4"/>
</Grid>
</Grid>
</Border>
Set ClipToBounds to True.
<Border ClipToBounds="True" BorderBrush="#FF000000" BorderThickness="1"
CornerRadius="20">
<Grid>
<MediaElement x:Name="movieLoader" HorizontalAlignment="Left"
Height="128" VerticalAlignment="Top" Width="236"
Source="../video/empty.mp4"/>
</Grid>
</Border>

Different Color to each side in Border in WPF XAML?

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>

How do you style the label for a Silverlight ToggleSwitch?

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.

How to add decorator with textblock programmatically to a canvas?

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;

Resources