Can't change blue background in XAML Accordion

I am trying to use the accordion control in XAML but am unable to change the dark blue background that is used as default. I've manage to stumble upon a few other people having the same problem but with no solutions posted. The only answer I have found thus far involves using Expression Studio, but I unfortunately do not own a copy.

See below the designer code, there's not a whole lot there at the moment, I've tried setting the background property on each element but get no result on any of them.

<Window x:Class="Test.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="289" 
    Width="500" 
    xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit">
    <Grid>
        <my:Accordion HorizontalAlignment="Stretch"  VerticalAlignment="Stretch">
            <my:AccordionItem x:Name="item1" Header="Item 1">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                </Grid>
            </my:AccordionItem>
            <my:AccordionItem x:Name="item2" Header="Item 2">

            </my:AccordionItem>
            <my:AccordionItem x:Name="item3" Header="Item 3">

            </my:AccordionItem>
        </my:Accordion>        
    </Grid>
</Window>

Answers


Take a look at this MSDN Forum thread of someone having the same problem. Also be aware this control is of Preview quality which according to CodePlex is equivalant to an Alpha release.

From above link:

The key part is binding to the actual outer grid. For some reason, the accordion item isn't providing a width/height for the inner grid to stretch to, so you have to bind it to something "higher up" so to speak.


I tested it and it does work, It does give designer errors of Object reference not set to an instance of an object It does compile and run though.

<Grid>
    <my:Accordion HorizontalAlignment="Stretch"  VerticalAlignment="Stretch">
        <my:AccordionItem x:Name="item1" Header="Item 1">
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White" 
                Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}, Path=ActualWidth}"
                Height="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Grid}}, Path=ActualHeight}">
            </Grid>
        </my:AccordionItem>
        <my:AccordionItem x:Name="item2" Header="Item 2">
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White"  
                Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}, Path=ActualWidth}"
                Height="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Grid}}, Path=ActualHeight}">
            </Grid>
        </my:AccordionItem>
        <my:AccordionItem x:Name="item3" Header="Item 3">
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White" 
                Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}, Path=ActualWidth}"
                Height="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Grid}}, Path=ActualHeight}">
            </Grid>
        </my:AccordionItem>
    </my:Accordion>
</Grid>

Need Your Help

Conditional ruby gem dependencies within a gemspec

ruby rubygems gemspecs

I'm building a rails engine which uses foreign keys in migrations.

Haskell - Evaluation of (+) <$> (+3) <*> (*100) $ 5

haskell functor applicative

From the chapter on Functors in Learn You a Haskell for Great Good, Lipovańća states: