×

Discussion Board

Results 1 to 12 of 12
  1. #1
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Question Styling listbox item containing Path element - how to set the fill property

    So I'm facing current problem...
    I have a listbox with some listbox items and each of them contain a Path object.
    Now what I want to do seems easy, change the Fill of the Path object when selecting the listbox item.
    But alas, when trying this through listbox item styling, we are faced by the fact that the ContentControl inside the style only has a Forground to change! Also setting a RelativeSource to the Fill property of the Path doesn't seem to work...
    So any suggestions on how we do this?

    Code:

    Code:
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <ListBox x:Name="ImageBar"
    				HorizontalContentAlignment="Center"
    				ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemContainerStyle="{StaticResource ListBoxItemStyle}">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBoxItem>
                        <Path Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}"
                              Data="M37.786324,45.467003C39.394405,45.467003 40.702843,46.774002 40.702843,48.383999 40.702843,49.994999 39.394405,51.299996 37.786324,51.299996 36.178245,51.299996 34.869808,49.994999 34.869808,48.383999 34.869808,46.774002 36.178245,45.467003 37.786324,45.467003z M26.671389,45.467003C28.282196,45.467003 29.582848,46.774002 29.582848,48.383999 29.582848,49.994999 28.282196,51.299996 26.671389,51.299996 25.060581,51.299996 23.749926,49.994999 23.749926,48.383999 23.749926,46.774002 25.060581,45.467003 26.671389,45.467003z M42.511345,36.764008C44.122189,36.764008 45.432873,38.069786 45.432873,39.680516 45.432873,41.291245 44.122189,42.597023 42.511345,42.597023 40.900505,42.597023 39.599827,41.291245 39.599827,39.680516 39.599827,38.069786 40.900505,36.764008 42.511345,36.764008z M31.961349,36.764008C33.572155,36.764008 34.872807,38.069786 34.872807,39.680516 34.872807,41.291245 33.572155,42.597023 31.961349,42.597023 30.350542,42.597023 29.039886,41.291245 29.039886,39.680516 29.039886,38.069786 30.350542,36.764008 31.961349,36.764008z M20.771337,36.764008C22.382177,36.764008 23.692862,38.069786 23.692862,39.680516 23.692862,41.291245 22.382177,42.597023 20.771337,42.597023 19.160496,42.597023 17.859817,41.291245 17.859817,39.680516 17.859817,38.069786 19.160496,36.764008 20.771337,36.764008z M26.491566,0C32.521801,8.3675695E-07 37.622181,4.5700085 39.312214,10.863009 40.262218,10.601992 41.252262,10.450991 42.272339,10.450991 48.382656,10.450991 53.333004,15.399997 53.333004,21.506993 53.333004,25.436009 51.282841,28.877995 48.192707,30.84 46.952648,31.847996 45.372604,32.457005 43.66243,32.468998 43.202442,32.524998 42.752346,32.563999 42.272339,32.563999 41.812351,32.563999 41.362377,32.528019 40.922287,32.472019L12.440745,32.472019C11.990769,32.528019 11.530662,32.563999 11.060665,32.563999 4.9503445,32.563999 0,27.804997 0,21.933995 0,16.063998 4.9503445,11.302004 11.060665,11.302004 11.900677,11.302004 12.72079,11.40201 13.510751,11.575014 15.000823,4.9209912 20.241222,8.3675695E-07 26.491566,0z" />
                    </ListBoxItem>
                </ListBox>
            </Grid>
    Code:
            <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="VerticalContentAlignment" Value="Top"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver"/>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

  2. #2
    Nokia Developer Champion
    Join Date
    Sep 2012
    Location
    Morocco
    Posts
    292

    Re: Styling listbox item containing Path element - how to set the fill property

    Hello !
    I just come up with this, could you test it ? (I didn't try this yet)

    Code:
    Fill="{Binding RelativeSource={RelativeSource Self}, Path=Foreground}"
    Yassine,

  3. #3
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Styling listbox item containing Path element - how to set the fill property

    On vacation now with no dev options... Will test it when back. But I think I tried all RelativeSource options! Will check again to be sure...

  4. #4
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Styling listbox item containing Path element - how to set the fill property

    Nope... doesn't work! Neither does RelativeSource Parent

  5. #5
    Registered User
    Join Date
    Jan 2013
    Location
    Timisoara, Romania
    Posts
    14

    Re: Styling listbox item containing Path element - how to set the fill property

    In your style try to add the VisualState like this and replace your ContentControl with this Path:
    Also, in your main code, remove the Fill property from your path and add the style into ListBoxItem like this: <ListBoxItem Style="{StaticResource ListBoxItemStyle}"

    <VisualStateManager.VisualStateGroups>
    <VisualState x:Name="Selected">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myPath"
    Storyboard.TargetProperty="Foreground">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>
    </VisualStateManager.VisualStateGroups>
    <Path x:Name="myPath" />

    I hope it helps!

  6. #6
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Styling listbox item containing Path element - how to set the fill property

    Well... yeah that is my current solution too...
    But that is a style hack. In WPF this isn't needed, so I was hoping to find a more 'general' solution to just keep the contentcontrol inside the style.
    But it seems yet again that current set of XAML possibilities on Windows Phone are limited ( in reference to WPF )

  7. #7
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Styling listbox item containing Path element - how to set the fill property

    So... I found a solution! I'm wrapping the path in a control and transfer the Foreground property value to the Fill property of the Path. Details are up on my blog, but I'll modify it to a Nokia wiki article soon... http://depblog.weblogs.us/2013/08/29...ows-phone-app/

  8. #8
    Nokia Developer Moderator
    Join Date
    Feb 2011
    Location
    Portugal
    Posts
    920

    Re: Styling listbox item containing Path element - how to set the fill property

    Quote Originally Posted by Depechie View Post
    So... I found a solution! I'm wrapping the path in a control and transfer the Foreground property value to the Fill property of the Path. Details are up on my blog, but I'll modify it to a Nokia wiki article soon... http://depblog.weblogs.us/2013/08/29...ows-phone-app/
    Cool Let us know when its done

  9. #9
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Styling listbox item containing Path element - how to set the fill property


  10. #10
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    477

    Re: Styling listbox item containing Path element - how to set the fill property

    Quote Originally Posted by Depechie View Post
    Great article, and the overall effect is very well done!

  11. #11
    Registered User
    Join Date
    Jun 2013
    Posts
    52

    Re: Styling listbox item containing Path element - how to set the fill property

    Thanks for the compliment

  12. #12
    Nokia Developer Moderator
    Join Date
    Feb 2011
    Location
    Portugal
    Posts
    920

    Re: Styling listbox item containing Path element - how to set the fill property

    Quote Originally Posted by Depechie View Post
    Thanks for the compliment
    Cool article. I like the way you used XAML to design the images.

Similar Threads

  1. read only property in a custome qml element
    By yasirnoor21 in forum [Archived] Qt Quick
    Replies: 7
    Last Post: 2012-04-22, 23:32
  2. Replies: 6
    Last Post: 2009-01-08, 13:06
  3. Replies: 2
    Last Post: 2008-07-01, 02:01
  4. drawing a listbox that doesn't fill up the whole screen
    By ThreeSixFiveOh in forum Symbian User Interface
    Replies: 2
    Last Post: 2003-11-21, 09:30
  5. Replies: 1
    Last Post: 2002-11-13, 10:15

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •