I have a template for Combobox, code is mostly from msdn documentation.
I want to change the color of the arrow to gray, when the combo box is disabled.
any ideas?
here's the code:
<!--ComboBoxStyle-->
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" />
<Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/>
<ContentControl Content="{Binding ComboPath}"/>
<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" Fill="{StaticResource AlpmRed}"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="30" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Editable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ContentSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2"
Focusable="false"
ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}" DataContext="{Binding}" />
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Left">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"
Focusable="False" PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource AlpmColorLightGray}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="White" />
</Border.Background>
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border" Padding="2" SnapsToDevicePixels="true" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I think the best way is to bind the Fill on the shape to the foreground of the toggle button, which you can either do per-instance, or for all combo boxes using this control template; this solution uses the latter:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" />
<Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/>
<ContentControl Content="{Binding ComboPath}"/>
<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" Fill="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}">
</Path>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="False">
<Setter Property="Foreground" Value="{StaticResource AlpmGray}"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter Property="Foreground" Value="{StaticResource AlpmRed}"></Setter>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
This binds the Fill to the TemplatedParent (in this case the ToggleButton), and thus the enabled state of the button (generally tied to the parent control).
Related
I'm upgrading my app to UWP and found that when I swipe the pivot item it works fine while clicking|tapping will cause app crash. This only happens in SP not in desktop mode nor phone. I do think this style is broken, but have no idea why it will fail and how to fix it. Any idea?
<Style x:Key="PivotStyle" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource XX.ColorBrush.BB1}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="-2,0,0,0">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using infragistics controls for masked input. I created my own masked input for IP address and inherent class from XamMaskedInput.
The inherited class looks like:
public class IpMaskedTextBox : XamMaskedInput
{
BrushConverter bc = new BrushConverter();
public IpMaskedTextBox() : base()
{
Background = (Brush) bc.ConvertFrom("#F0FAFF");
BorderThickness = new Thickness(0);
BorderBrush = null;
Padding = new Thickness(5,0,5,0);
FontWeight = FontWeights.Bold;
VerticalContentAlignment = VerticalAlignment.Center;
HorizontalContentAlignment = HorizontalAlignment.Center;
}
// Prevent space character
protected override void OnPreviewKeyDown(System.Windows.Input.KeyEventArgs e)
{
base.OnPreviewKeyDown(e);
switch (e.Key)
{
case Key.Right:
e.Handled = true;
break;
case Key.Left:
e.Handled = true;
break;
}
}
}
and the appearance on xaml:
My question is, how can I full fill the prompt char on whole scope from textbox, that does not have free spaces on right and left.
Here the link to infragistics xamMaskedInput API.
Update:
The result should be like this:
Update 2:
Finally i found the style:
<Style x:Key="MaskedInputStyle" TargetType="igEditors:XamMaskedInput">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="igPrim:XamlHelper.SnapsToDevicePixels" Value="True" />
<Setter Property="SpinButtonStyle" Value="{StaticResource spinButtonStyle}" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="2"></Setter>
<Setter Property="BorderBrush" Value="{StaticResource SilverlightDarkBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igEditors:XamMaskedInput">
<igPrim:ValidationDecorator x:Name="MainBorder">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_InputTextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="ReadOnly"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- SSP 10/11/11 TFS91203 - Moved this border to surround the text box below. This is
to fix an issue where if the border thickness is set to a large value, the borders cover the contents. -->
<!--<Border x:Name="BgBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="1" Visibility="Visible" CornerRadius="2" Margin="0"/>
<Border x:Name="OverBorder" BorderThickness="1" CornerRadius="1" Opacity="0" Margin="1" BorderBrush="{StaticResource FocusBorderFillKey}" Grid.ColumnSpan="2"/>-->
<!-- SSP 10/11/11 TFS91203 - Moved this here from above. See comments above. -->
<Border x:Name="BgBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="1" Visibility="Visible" CornerRadius="2" Margin="0">
<!-- SSP 10/11/11 TFS91426 - Changed the VerticalAlignment from Center to Stretch so the
VerticalContentAlignment takes effect.
-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- SSP 10/11/11 TFS91426 - Changed the VerticalAlignment from Center to Stretch so the
VerticalContentAlignment takes effect.
-->
<!-- SSP 7/11/13 TFS128674 - Added IsInputMethodEnabled binding -->
<Grid>
<igEditorsPrim:MaskedInputTextBox
x:Name="PART_InputTextBox"
Style="{StaticResource maskedInputTextBoxStyle}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
TextAlignment="{Binding HorizontalContentAlignment, Converter={StaticResource horizToTextAlignmentConverter}, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="{TemplateBinding Foreground}"
InputMethod.IsInputMethodEnabled="{TemplateBinding InputMethod.IsInputMethodEnabled}"
InputMethod.PreferredImeState="{TemplateBinding InputMethod.PreferredImeState}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Stretch"
igPrim:XamlHelper.Focusable="{TemplateBinding igPrim:XamlHelper.Focusable}"
IsTabStop="{TemplateBinding IsTabStop}"
/>
<Border x:Name="OverBorder" BorderThickness="1" CornerRadius="1" Opacity="0" BorderBrush="{StaticResource FocusBorderFillKey}" Grid.ColumnSpan="2"/>
</Grid>
<Grid x:Name="PART_SpinButtons" Grid.Column="1" Visibility="{TemplateBinding SpinButtonVisibilityResolved}" Margin="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RepeatButton x:Name="spinUp" Style="{TemplateBinding SpinButtonStyle}" ContentTemplate="{StaticResource IncreaseGlyphKey}" >
<ig:Commanding.Command>
<igEditorsPrim:MaskedInputCommandSource EventName="Click" CommandId="SpinUp" />
</ig:Commanding.Command>
</RepeatButton>
<RepeatButton x:Name="spinDown" Style="{TemplateBinding SpinButtonStyle}" Grid.Row="2" ContentTemplate="{StaticResource DecreaseGlyphKey}">
<ig:Commanding.Command>
<igEditorsPrim:MaskedInputCommandSource EventName="Click" CommandId="SpinDown" />
</ig:Commanding.Command>
</RepeatButton>
</Grid>
</Grid>
</Border>
</Grid>
</igPrim:ValidationDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using Popup in windows phone,
When I open a popup, the popup opens and the page behind the popup element can be accessible, I have a listbox and it can be scrollable.
If popup opens the controls behind that should be non accessible , right? how can i do that,
Here my code
Popup popup = new Popup();
popup.Height = 300;
popup.Width = 450;
popup.VerticalOffset = 250;
popup.HorizontalOffset = 20;
notLogedInPopup control = new notLogedInPopup();
popup.Child = control;
popup.IsOpen = true;
here the code for notLogedInPopup design, that is the UserControl
<UserControl x:Class="offertimeline.notLogedInPopup"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="300" d:DesignWidth="450">
<UserControl.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="/offertimeline;component/images/listbg.png" />
</Grid.Background>
<Image Source="/offertimeline;component/images/filtertitlebg.png" Margin="0,-2,0,242" Name="bgImage" Stretch="Fill" />
<Image Margin="9,5,0,255" Source="/offertimeline;component/images/alert_icon.png" Name="alertIconImage" Stretch="Fill" HorizontalAlignment="Left" Width="51" />
<Button Style="{StaticResource ButtonStyle1}" BorderThickness="0" Margin="354,-2,13,241" Name="closeBtn" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" ManipulationCompleted="closeBtn_ManipulationCompleted" ManipulationDelta="closeBtn_ManipulationDelta" ManipulationStarted="closeBtn_ManipulationStarted">
<Button.Background>
<ImageBrush ImageSource="/offertimeline;component/images/filter_close.png" />
</Button.Background>
</Button>
<TextBlock Margin="55,10,124,255" Text="Login Required" TextAlignment="Center" Foreground="Black" Name="titleTextBx" FontSize="24" />
<TextBlock Height="89" HorizontalAlignment="Left" Margin="28,124,0,0" Name="contentTextBx" Text="Please login with your credentials to do this." VerticalAlignment="Top" Width="406" Foreground="Gray" TextWrapping="Wrap" FontSize="22" TextAlignment="Center" />
<Button Style="{StaticResource ButtonStyle1}" Height="72" HorizontalAlignment="Left" Margin="131,240,0,0" Name="okBtn" VerticalAlignment="Top" Width="160" BorderThickness="0" BorderBrush="{x:Null}" Click="okBtn_Click" ManipulationCompleted="okBtn_ManipulationCompleted" ManipulationDelta="okBtn_ManipulationDelta" ManipulationStarted="okBtn_ManipulationStarted">
<Button.Background>
<ImageBrush ImageSource="/offertimeline;component/images/okbtn.png" />
</Button.Background>
</Button>
</Grid>
Thank you.
I would like to create a border around the currently selected item within a LongListSelector, but I am having trouble getting the proper implementation. From referencing http://code.msdn.microsoft.com/wpapps/Highlight-a-selected-item-30ced444 I have tried to follow the sample code by creating a custom Style to manage the selected item change, although I am trying to place a border around an image instead of a textbox. Also, I do have a custom ItemTemplate as my DataTemplate for my LongListSelector which manages the size of my bound images and controls a required ContextMenu for each item.
For some reason, I am having trouble adapting the sample to place a border around a selected item, but what I have so far is as follows
MainPage.xaml
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="ItemTemplate">
<!--<Border x:Name="brd" CornerRadius="10" BorderBrush="{StaticResource PhoneAccentBrush}" Width="Auto" BorderThickness="3">-->
<Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3">
<Viewbox Width="108" Height="108">
<Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
</Viewbox>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit" Click="editContextMenuItem_Click"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite" Click="favoriteContextMenuItem_Click"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete" Click="deleteContextMenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Border>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
...
<phone:LongListSelector x:Name="Recent" Margin="0"
Style="{StaticResource MyLongListSelectorStyle}"
SelectionChanged="recent_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
LayoutMode="Grid" GridCellSize="108,108"
ItemTemplate="{StaticResource ItemTemplate}"
/>
App.xaml
<Style x:Key="MyLongListSelectorStyle" TargetType="phone:LongListSelector" >
<!--<Setter Property="LayoutMode" Value="List"/>-->
<Setter Property="LayoutMode" Value="Grid"/>
<!--<Setter Property="FontFamily" Value="Times New Roman"/>-->
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<UserControl>
<Border x:Name="MyBorder" Background="Transparent">
<VisualStateManager.VisualStateGroups >
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MyBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!--<StackPanel>
<TextBlock x:Name="textBlock" Text="{Binding}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>-->
</Border>
</UserControl>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
MainPage.xaml.cs
private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var s = sender as LongListSelector;
var item = (sender as LongListSelector).SelectedItem;
if (item == null)
return;
// Get item of LongListSelector.
List<UserControl> listItems = new List<UserControl>();
GetItemsRecursive<UserControl>(Recent, ref listItems);
// Selected.
if (e.AddedItems.Count > 0 && e.AddedItems[0] != null)
{
foreach (UserControl userControl in listItems)
{
if (e.AddedItems[0].Equals(userControl.DataContext))
{
VisualStateManager.GoToState(userControl, "Selected", true);
}
}
}
// Unselected.
if (e.RemovedItems.Count > 0 && e.RemovedItems[0] != null)
{
foreach (UserControl userControl in listItems)
{
if (e.RemovedItems[0].Equals(userControl.DataContext))
{
VisualStateManager.GoToState(userControl, "Normal", true);
}
}
}
}
public static void GetItemsRecursive<T>(DependencyObject parents, ref List<T> objectList) where T : DependencyObject
{
var childrenCount = VisualTreeHelper.GetChildrenCount(parents);
for (int i = 0; i < childrenCount; i++)
{
var child = VisualTreeHelper.GetChild(parents, i);
if (child is T)
{
objectList.Add(child as T);
}
GetItemsRecursive<T>(child, ref objectList);
}
return;
}
I'm stuck on what to do from here, any ideas?
EDIT** slightly changed implementation but still not working.
MainPage.xaml
<phone:PhoneApplicationPage.Resources>
<Style x:Key="MyLongListSelectorStyle" TargetType="phone:LongListSelector" >
<!--<Setter Property="LayoutMode" Value="List"/>-->
<Setter Property="LayoutMode" Value="Grid"/>
<!--<Setter Property="FontFamily" Value="Times New Roman"/>-->
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<UserControl>
<!--<Border x:Name="MyBorder" Background="Transparent">-->
<Border x:Name="MyBorder" Background="Transparent">
<VisualStateManager.VisualStateGroups >
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<Storyboard>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MyBorder">-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="brd">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3">
<!--<Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3">-->
<Viewbox Width="108" Height="108">
<Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
</Viewbox>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit" Click="editContextMenuItem_Click"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite" Click="favoriteContextMenuItem_Click"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete" Click="deleteContextMenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Border>
<!--<StackPanel>
<TextBlock x:Name="textBlock" Text="{Binding}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>-->
</Border>
</UserControl>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
...
<phone:LongListSelector x:Name="Recent" Margin="0"
Style="{StaticResource MyLongListSelectorStyle}"
SelectionChanged="recent_SelectionChanged"
toolkit:TiltEffect.IsTiltEnabled="True"
LayoutMode="Grid" GridCellSize="108,108"
/>
MainPage.xaml.cs
//remains the same
I can't test it rigth now because I'm at work and I only have VS2010 but try changing
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
You need to use an integer.
You are trying to change the thickness of the border using a color.
<DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
[EDIT]
It seems that LongListSelector don't let us easily template the selected item...
With the solution of Johannes Wanzek https://stackoverflow.com/a/13874389/1408558
I managed to do what you want:
Delete your old xaml and code behind code, and follow these steps.
You need to put those styles on top of your page
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PhoneRadioButtonCheckBoxBase" BasedOn="{StaticResource PhoneButtonBase}" TargetType="ToggleButton">
<Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBorderBrush}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0"/>
</Style>
<Style x:Key="RadioButtonStyle1" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked"/>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
And then use the LongListSelector like this:
<phone:LongListSelector x:Name="Recent" Margin="0"
toolkit:TiltEffect.IsTiltEnabled="True"
LayoutMode="Grid" GridCellSize="108,108" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ContentControl HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
<ContentControl.Resources>
<Storyboard x:Name="CheckedStoryboard">
<ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="brd" d:IsOptimized="True"/>
</Storyboard>
</ContentControl.Resources>
<RadioButton x:Name="radioButton" HorizontalAlignment="Stretch" Margin="0,0,0,0" GroupName="A" Background="Black" Style="{StaticResource RadioButtonStyle1}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<eim:ControlStoryboardAction Storyboard="{StaticResource CheckedStoryboard}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<eim:ControlStoryboardAction ControlStoryboardOption="Stop" Storyboard="{StaticResource CheckedStoryboard}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Border x:Name="MyBorder" Background="Transparent">
<Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3" BorderBrush="Transparent">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite"/>
<toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<Viewbox Width="108" Height="108">
<Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
</Viewbox>
</Border>
</Border>
</RadioButton>
</ContentControl>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
And here some of the namespaces you may need:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
Check out my alternative answer here How to highlight the selected item of long list selector in windows phone 8
It shows the example for the background color but could just as easily be adapted for the border color of something
Might not be the ideal way to do it but its simple and clean and works for me
I'm new to WPF and have been looking at a lot of articles and videos but I've been unable to find a solution. What I have is a button which displays an image and text within a stackpanel. I would like to make ONLY the textblock move one pixel to the right and down when the button is pressed but I cant seem to figure out a way to target only the TextBlock. Any help would be greatly appreciated. THANKS
<Style x:Key="appFlatButtonLarge" TargetType="{x:Type localUI:ImageButton}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Foreground" Value="{StaticResource appPrimaryBackColorDark}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type localUI:ImageButton}">
<Border Name="Border" BorderBrush="LightGray" BorderThickness="1" Background="White" >
<StackPanel Name="Panel" Height="Auto" Orientation="Horizontal" Background="Transparent">
<Image Name="ibImage" Source="{TemplateBinding ImageSource}" Margin="5" Width="Auto" Height="Auto" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased"/>
<TextBlock Name="ibTextBlock" Text="{TemplateBinding Content}" HorizontalAlignment="Left" FontWeight="Bold" Margin="5,0,0,0" VerticalAlignment="Center" FontSize="12" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource appPrimaryBackColorDark}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Panel" Property="Background" Value="{StaticResource appButtonBackColorPressed}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource appPrimaryBackColorDark}" />
<Setter TargetName="ibImage" Property="Source" Value="{Binding Path=ImageSourceHot, RelativeSource={RelativeSource AncestorType={x:Type localUI:ImageButton}} }" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="Green" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Just use a TranslateTransform animation. make sure to use RenderTransform and not LayoutTransform as LayoutTransform will actually change the Layout which might not be desirable when the parent of your TextBlock and Image is a StackPanel
So in your Style if I switch the ControlTemplate definition to:
<ControlTemplate TargetType="{x:Type localUI:ImageButton}">
<Border x:Name="Border"
Background="White"
BorderBrush="LightGray"
BorderThickness="1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ibTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0"
Value="5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ibTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0"
Value="5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name="Panel"
Height="Auto"
Background="Transparent"
Orientation="Horizontal">
<Image Name="ibImage"
Width="Auto"
Height="Auto"
Margin="5"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased"
Source="{TemplateBinding ImageSource}"
Stretch="None" />
<TextBlock x:Name="ibTextBlock"
Margin="5,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="12"
FontWeight="Bold"
RenderTransformOrigin="0.5,0.5"
Text="{TemplateBinding Content}">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
...
you should get what you're after.
Note
In both the Animation steps I've set
<EasingDoubleKeyFrame KeyTime="0" Value="5" />
you can change the Value to "1" or whatever you desire.
You could change the Margin-Property of your TextBlock with the same trigger that changes the BorderBrush.
Say you set Margin = "2,2,2,2" initially, and then you set it to "3,2,1,2" when the button is pressed.
Your TextBlock will 'move' by 1/96 inch (usually, you don't pixel in WPF).
You can also use negative margins, if needed.