I have a Custom style to my Button in my Silverlight app.
Im using a Static style and a Control Template. In the VisualStudio designer I can see the image on the button however when I run the application the Image is not showing.
Here is the XAML for the Style
<Style x:Key="PlayButtonStyle" TargetType="Button">
<Setter Property="Foreground" Value="DarkGreen" />
<Setter Property="Template" Value="{StaticResource PlayButtonControlTemplate}"/>
</Style>
Here is the XAML for the ControlTemplate
<ControlTemplate x:Key="PlayButtonControlTemplate" TargetType="Button">
<Border x:Name="Border">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlNormalColor}" />
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
<VisualTransition GeneratedDuration="0" To="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Width="55" Height="25">
<Image x:Name="DefaultImage" Source="Images/VideoPlayer/play_button.png" Opacity="1" />
<Image x:Name="HoverImage" Source="Images/VideoPlayer/play_button_hover.png" Opacity="0" />
</Grid>
</Border>
</ControlTemplate>
This is how I have assigned it
<Button x:Name="playPauseButton" Content="Play" Style="{StaticResource PlayButtonStyle}" Click="playPauseButton_Click" />
Set the image Build Action as Resource and change your code to:
<Image x:Name="DefaultImage" Source="pack://application:,,,/[Your namespace];component/Images/VideoPlayer/play_button.png" Opacity="1" />
Do not forget to change to your namespace.
It should be enough.
EDIT:
After taking a closer look I think you just need to do it this way:
<Image x:Name="DefaultImage" Source="/[Your namespace];component/Images/VideoPlayer/play_button.png" Opacity="1" />
Related
My Uwp app builds and runs correctly. The User Control is visible in the user control designer. When I initially add the control to my main page the control is visible in the designer. I run the app and come back to main Page designed and the User Control has vanished and the xaml says "Unable ti instaiate an object of type user Control. I don;t understand why the control is visible in the user control designer but not the main page designer AND the app runs fine.
Has anybody else come across this problem? is there a clue to where I might find issues in the user control?
The XAML for the user control:
<UserControl
x:Class="UI_Test_1.Controls.BookingTimeControl"
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:local="using:UI_Test_1.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerik="using:Telerik.UI.Xaml.Controls.Input"
xmlns:uControls="using:UI_Test_1.Controls"
d:DesignHeight="400"
d:DesignWidth="500"
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="ListBoxItemContainerStyle1" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Padding" Value="5,5,5,5" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid
x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid.Resources>
<Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
<Setter Property="FontFamily" Value="XamlAutoFontFamily" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="10" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="LineStackingStrategy" Value="MaxHeight" />
<Setter Property="TextLineBounds" Value="Full" />
<Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" />
</Style>
<Style
x:Key="BodyContentPresenterStyle"
BasedOn="{StaticResource BaseContentPresenterStyle}"
TargetType="ContentPresenter">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="12" />
</Style>
</Grid.Resources>
<Rectangle
x:Name="PressedBackground"
Control.IsTemplateFocusTarget="True"
Fill="Transparent" />
<ContentPresenter
x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Style="{StaticResource BodyContentPresenterStyle}"
TextWrapping="NoWrap" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="yellow" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Green" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Green" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Green" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<uControls:StringFormatConverter x:Key="dateFormatter" />
</UserControl.Resources>
<Grid>
<Grid
Margin="10,10,10,10"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="Black">
<StackPanel
Grid.Row="0"
Grid.RowSpan="2"
Width="445"
Height="350"
Margin="5,5,5,5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="Blue"
Orientation="Horizontal">
<ListBox
Name="timeSelectionList"
Width="135"
Height="350"
HorizontalAlignment="Center"
VerticalAlignment="Top"
BorderBrush="Black"
BorderThickness="2"
GotFocus="Control_GotFocus"
ItemContainerStyle="{StaticResource ListBoxItemContainerStyle1}"
ItemsSource="{x:Bind timeSelectors}"
LostFocus="Control_LostFocus"
PreviewKeyDown="timeSelectionList_PreviewKeyDown"
SelectionChanged="TimeSelectionList_SelectionChanged" />
<StackPanel VerticalAlignment="Top" Orientation="Vertical">
<DatePicker
x:Name="cal"
Background="White"
Date="{x:Bind viewModel.bookingTime, Mode=TwoWay}"
DateChanged="cal_DateChanged"
DayFormat="{}{day.integer} {dayofweek.abbreviated}"
FontSize="20"
GotFocus="Control_GotFocus"
LostFocus="Control_LostFocus"
Opacity="100"
PreviewKeyDown="cal_PreviewKeyDown" />
<TimePicker
x:Name="timePicker"
Margin="5"
HorizontalAlignment="Center"
Background="White"
FontSize="20"
GotFocus="Control_GotFocus"
LostFocus="Control_LostFocus"
MinuteIncrement="5"
TimeChanged="timePicker_TimeChanged" />
<TextBox
Name="bookingTimeBox"
Width="250"
Height="auto"
Margin="5,0,5,5"
Background="Black"
FontSize="12"
FontWeight="Bold"
Foreground="Yellow"
Text="{x:Bind viewModel.bookingTime, Mode=OneWay, Converter={StaticResource dateFormatter}}"
TextAlignment="Center" />
</StackPanel>
</StackPanel>
</Grid>
</Grid>
In UWP I have this:
<GridView x:Name="gvList"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollMode="Enabled"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ItemTemplate="{StaticResource Template}"
Grid.Row="1"
ItemContainerStyle="{StaticResource ListViewNoAnimationStyle}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
My datatemplate is like this:
<DataTemplate x:Key="Template" x:DataType="data:Item">
<customControls:CustomControl
Model="{x:Bind Mode=OneWay}"
Width="{Binding ItemWidth, ElementName=customListControl}"
Height="{Binding ItemHeight, ElementName=customListControl}"
ItemPadding="{Binding ItemPadding, ElementName=customListControl}"/>
</DataTemplate>
In CustomControl there is one ImageEx control:
<controls:ImageEx x:Name="imageBackground" Source="{x:Bind Image, Mode=OneWay}" Stretch="UniformToFill"/>
There are more then 500 items in list that is populating this GridView.
The problem is I get the "Layout cycle detected. Layout could not complete." error. If I use the Image instead of ImageEx, everything is working just fine.
But, I need to use ImageEx because it sets it's source asynchroniously, so it populates everything without blocking the UI.
Anyone got idea about this?
Thanks to user AVK and his link https://github.com/Microsoft/UWPCommunityToolkit/issues/1328, I have added this style to my App, and it fixed the issue with ImageEx Layout cycle problem:
<Style TargetType="controls:ImageEx">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource ApplicationForegroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ImageEx">
<Grid Background="{TemplateBinding Background}">
<Image
Name="PlaceholderImage"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Opacity="1.0"
Source="{TemplateBinding PlaceholderSource}"
Stretch="{TemplateBinding PlaceholderStretch}" />
<Image
Name="Image"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
NineGrid="{TemplateBinding NineGrid}"
Opacity="0.0"
Stretch="{TemplateBinding Stretch}" />
<ProgressRing
Name="Progress"
Margin="16"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Transparent"
Foreground="{TemplateBinding Foreground}"
IsActive="False"
Visibility="Collapsed" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Failed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderImage" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Loading">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Progress" Storyboard.TargetProperty="IsActive">
<DiscreteObjectKeyFrame KeyTime="0" Value="True" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Progress" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderImage" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Loaded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Progress" Storyboard.TargetProperty="IsActive">
<DiscreteObjectKeyFrame KeyTime="0" Value="False" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Progress" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
AutoReverse="False"
BeginTime="0"
Storyboard.TargetName="Image"
Storyboard.TargetProperty="Opacity"
From="0"
To="1" />
<DoubleAnimation
AutoReverse="False"
BeginTime="0"
Storyboard.TargetName="PlaceholderImage"
Storyboard.TargetProperty="Opacity"
From="1"
To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unloaded" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a simple listbox and I would like to change the Style so that when an item is selected, the border of the item changes colour.
Currently my ListBox and style is defined as:
<ListBox x:Name="DaysList" HorizontalContentAlignment="Stretch" Background="Transparent" Height="300" Grid.Row="1" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="FontSize" Value="30" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderThickness="3" BorderBrush="Black" >
<ContentControl x:Name="ContentContainer"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Pink"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
The Pressed and Normal Visual States are working as expected, but the Selected state isn't. Am I missing a step somewhere?
It doesn't work because the State you're looking for is: SelectedUnfocused
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
After you implement the code you will realize you didn't handle the Unselected case correctly: So set it back to green when it gets Unselected
<VisualState x:Name="Unselected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
I have a button control, I have set a template for so that it will cycle through a bunch of images as its normal animation. My issue is, the first time it cycles through it flashes and stutters (I believe as the images are being loaded). Is there a way to make them all preload?
<Application.Resources>
<ImageBrush x:Key="First" ImageSource="Assets/btn1.png" />
<ImageBrush x:Key="Second" ImageSource="Assets/bt2.png" />
<ImageBrush x:Key="Third" ImageSource="Assets/bt3.png" />
<ImageBrush x:Key="Fourth" ImageSource="Assets/bt4.png" />
<Thickness x:Key="ButtonBorderThemeThickness">2</Thickness>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource First}" ></DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{StaticResource Second}" ></DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{StaticResource Third}" ></DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource Fourth}" ></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" >
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Try this
<Application.Resources>
<ImageBrush x:Key="First" ImageSource="Assets/btn1.jpg" />
<ImageBrush x:Key="Second" ImageSource="Assets/btn2.png" />
<ImageBrush x:Key="Third" ImageSource="Assets/btn3.png" />
<ImageBrush x:Key="Fourth" ImageSource="Assets/btn4.png" />
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" >
<Border.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames RepeatBehavior="Forever" Duration="0:0:0.4" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{StaticResource First}" ></DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{StaticResource Second}" ></DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource Third}" ></DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{StaticResource Fourth}" ></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
<Button Height="100" Width="100" Style="{StaticResource buttonStyle}"/>
So I'm trying to use the default ComboBox to display a list of choices. I want the background of the context menu that pops up when the combo box is selected to be Transparent. I can't find a property or style that does this and I haven't found much in the ways of doing this. Thanks in advance!
You need to extract a copy of the current template of your ComboBox with Visual Studio designer view or Blend and modify the Background property of the Border named "PopupBorder" to say Transparent. By default it's using {StaticResource ComboBoxPopupBackgroundThemeBrush}.
Here's a copy of the updated Style resource.
<Style
x:Key="ComboBoxStyle1"
TargetType="ComboBox">
<Setter
Property="Padding"
Value="8,0" />
<Setter
Property="Foreground"
Value="{StaticResource ComboBoxForegroundThemeBrush}" />
<Setter
Property="Background"
Value="{StaticResource ComboBoxBackgroundThemeBrush}" />
<Setter
Property="BorderBrush"
Value="{StaticResource ComboBoxBorderThemeBrush}" />
<Setter
Property="BorderThickness"
Value="{StaticResource ComboBoxBorderThemeThickness}" />
<Setter
Property="TabNavigation"
Value="Once" />
<Setter
Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled" />
<Setter
Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter
Property="ScrollViewer.HorizontalScrollMode"
Value="Disabled" />
<Setter
Property="ScrollViewer.VerticalScrollMode"
Value="Auto" />
<Setter
Property="ScrollViewer.IsVerticalRailEnabled"
Value="True" />
<Setter
Property="ScrollViewer.IsDeferredScrollingEnabled"
Value="False" />
<Setter
Property="ScrollViewer.BringIntoViewOnFocusChange"
Value="True" />
<Setter
Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter
Property="FontFamily"
Value="{StaticResource ContentControlThemeFontFamily}" />
<Setter
Property="FontSize"
Value="{StaticResource ControlContentThemeFontSize}" />
<Setter
Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<CarouselPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="ComboBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="32" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup
x:Name="CommonStates">
<VisualState
x:Name="Normal" />
<VisualState
x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxPointerOverBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="Highlight">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState
x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxPressedBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PressedBackground" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="DropDownGlyph">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxArrowPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState
x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="Background">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="DropDownGlyph">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxArrowDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup
x:Name="FocusStates">
<VisualState
x:Name="Focused">
<Storyboard>
<DoubleAnimation
Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="HighlightBackground" />
<DoubleAnimation
Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="Highlight" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxFocusedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState
x:Name="FocusedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Foreground"
Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="Highlight">
<DiscreteObjectKeyFrame
KeyTime="0"
Value="{StaticResource ComboBoxPressedHighlightThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState
x:Name="Unfocused" />
<VisualState
x:Name="PointerFocused" />
<VisualState
x:Name="FocusedDropDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PopupBorder">
<DiscreteObjectKeyFrame
KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup
x:Name="DropDownStates">
<VisualState
x:Name="Opened">
<Storyboard>
<SplitOpenThemeAnimation
ClosedTargetName="ContentPresenter"
ContentTranslationOffset="0"
ContentTargetName="ScrollViewer"
ClosedLength="{Binding TemplateSettings.DropDownClosedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"
OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"
OpenedTargetName="PopupBorder"
OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Storyboard>
</VisualState>
<VisualState
x:Name="Closed">
<Storyboard>
<SplitCloseThemeAnimation
ClosedTargetName="ContentPresenter"
ContentTranslationOffset="40"
ContentTranslationDirection="{Binding TemplateSettings.SelectedItemDirection, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ContentTargetName="ScrollViewer"
ClosedLength="{Binding TemplateSettings.DropDownClosedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"
OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"
OpenedTargetName="PopupBorder"
OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border
x:Name="Background"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.ColumnSpan="2" />
<Rectangle
x:Name="PressedBackground"
Fill="{StaticResource ComboBoxPressedHighlightThemeBrush}"
Margin="{TemplateBinding BorderThickness}"
Opacity="0" />
<Border
x:Name="HighlightBackground"
BorderBrush="{StaticResource ComboBoxFocusedBorderThemeBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{StaticResource ComboBoxFocusedBackgroundThemeBrush}"
Grid.ColumnSpan="2"
Opacity="0" />
<Rectangle
x:Name="Highlight"
Fill="{StaticResource ComboBoxSelectedBackgroundThemeBrush}"
Margin="{TemplateBinding BorderThickness}"
Opacity="0" />
<ContentPresenter
x:Name="ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<TextBlock
x:Name="DropDownGlyph"
Grid.Column="1"
Foreground="{StaticResource ComboBoxArrowForegroundThemeBrush}"
FontWeight="Bold"
FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
FontFamily="{StaticResource SymbolThemeFontFamily}"
HorizontalAlignment="Right"
IsHitTestVisible="False"
Margin="0,0,6,4"
Text=""
VerticalAlignment="Center" />
<Popup
x:Name="Popup">
<Border
x:Name="PopupBorder"
BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}"
BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}"
Background="Transparent"
HorizontalAlignment="Stretch">
<ScrollViewer
x:Name="ScrollViewer"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
Foreground="{StaticResource ComboBoxPopupForegroundThemeBrush}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
VerticalSnapPointsType="OptionalSingle"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalSnapPointsAlignment="Near"
ZoomMode="Disabled">
<ItemsPresenter />
</ScrollViewer>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Have you tried the following?
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="Transparent" />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
This works for me (without redefining the ControlTemplate).