locked
ItemContainerStyle with Button RRS feed

  • Question

  • Hello,

    In my SL4 application, I created a custom ListBox ItemContainerStyle, where every item will have a button docket on its right. This button will be used to view details for the selected item.

    The problem is that when a button is clicked, the current selected item property of the list box is not changed. So if the user click in a button form a different item on the list, the details shown will be from the selected item.

    I would like to get details from the corresponding item from the button the user clicked. This is how my style is defined:

    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
        		<Setter Property="Padding" Value="3"/>
        		<Setter Property="HorizontalContentAlignment" Value="Left"/>
        		<Setter Property="VerticalContentAlignment" Value="Top"/>
        		<Setter Property="Background" Value="Transparent"/>
        		<Setter Property="BorderThickness" Value="1"/>
        		<Setter Property="TabNavigation" Value="Local"/>
        		<Setter Property="Template">
        			<Setter.Value>
        				<ControlTemplate TargetType="ListBoxItem">
        					<Grid Background="{TemplateBinding Background}">
        						<Grid.ColumnDefinitions>
        							<ColumnDefinition Width="0.865*"/>
        							<ColumnDefinition Width="0.135*"/>
        						</Grid.ColumnDefinitions>
        						<VisualStateManager.VisualStateGroups>
        							<VisualStateGroup x:Name="CommonStates">
        								<VisualState x:Name="Normal"/>
        								<VisualState x:Name="MouseOver">
        									<Storyboard>
        										<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
        									</Storyboard>
        								</VisualState>
        								<VisualState x:Name="Disabled">
        									<Storyboard>
        										<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
        									</Storyboard>
        								</VisualState>
        							</VisualStateGroup>
        							<VisualStateGroup x:Name="SelectionStates">
        								<VisualState x:Name="Unselected"/>
        								<VisualState x:Name="Selected">
        									<Storyboard>
        										<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
        									</Storyboard>
        								</VisualState>
        							</VisualStateGroup>
        							<VisualStateGroup x:Name="FocusStates">
        								<VisualState x:Name="Focused">
        									<Storyboard>
        										<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
        											<DiscreteObjectKeyFrame KeyTime="0">
        												<DiscreteObjectKeyFrame.Value>
        													<Visibility>Visible</Visibility>
        												</DiscreteObjectKeyFrame.Value>
        											</DiscreteObjectKeyFrame>
        										</ObjectAnimationUsingKeyFrames>
        									</Storyboard>
        								</VisualState>
        								<VisualState x:Name="Unfocused"/>
        							</VisualStateGroup>
        						</VisualStateManager.VisualStateGroups>
        						<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
        						<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
        						<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="3,3,0,3" Grid.ColumnSpan="2"/>
        						<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" Grid.ColumnSpan="2"/>
        						<Grid Grid.Column="1" >
        							<Button Margin="0,1"  BorderThickness="1" Click="Button_Click">
        								
    
        							</Button>
        						</Grid>
        					</Grid>
        				</ControlTemplate>
        			</Setter.Value>
        		</Setter>
        	</Style>

    Any thoughts?

    Thank you,

    Igor.


    Product Manager (www.otimizenesting.com) www.facebook.com/ikondrasovas

    Friday, April 27, 2012 8:24 PM

Answers

  • Howdy Igor.

    If you don't mind going to code behind you could try the following...

    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    
    namespace SilverlightApplication1
    {
    	public partial class MainPage : UserControl
    	{
    		public MainPage()
    		{
    			InitializeComponent();
    		}
    
    		private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
    		        var b = sender as Button;
    			DependencyObject item = b;
    			while (item is ListBoxItem == false)
    			{
    				item = VisualTreeHelper.GetParent(item);
    			}
    			var lbi = (ListBoxItem)item;
    			lbi.IsSelected = true;
    
    		}
    	}
    }
    <UserControl 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"
    	x:Class="SilverlightApplication1.MainPage"
    	Width="640" Height="480">
    	<UserControl.Resources>
    		<DataTemplate x:Key="ItemTemplate">
    			<StackPanel Orientation="Horizontal">
    				<TextBlock Text="{Binding Property1}" Margin="0,0,20,0"/>
    				<Button Content="Select Me" Width="75" Click="Button_Click"/>
    			</StackPanel>
    		</DataTemplate>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<ListBox x:Name="myListBox" HorizontalAlignment="Left" Width="248" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}"/>
    		<Grid DataContext="{Binding SelectedItem, ElementName=myListBox}" Margin="297,30,89,0" d:DataContext="{Binding Collection[0]}" Height="200" VerticalAlignment="Top">
    			<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Text="Property1"/>
    			<TextBlock Text="{Binding Property1}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Margin="104,0,0,0"/>
    			<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Margin="0,20,0,0" Text="Property2"/>
    			<TextBlock Text="{Binding Property2}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Margin="104,20,0,0"/>
    			<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Margin="0,40,0,0" Text="Property3"/>
    			<CheckBox IsChecked="{Binding Property3, Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="104,40,0,0"/>
    			<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Margin="0,102,0,0" Text="Property4"/>
    			<Image Source="{Binding Property4}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100" Margin="104,60,0,0"/>
    		</Grid>
    	</Grid>
    </UserControl>

    I stuck the click event in the item template.

    ~Christine


    !!! I should have put this in the sliding panel! I'm a bit slow to catch on, sorry. :)
    Friday, April 27, 2012 9:37 PM