Getting my UserControl to display it's containing controls' background

Question

4.00/5 (1 vote)

See more:

I have a WPF application deployed with MVVM, Prism, and Unity. I'm using Prism 4.1 and Unity 2.0.

I have my Shell created and the "menu" area is a ContentControl; a raised box with shadowing and a fairly opaque background showing the background of it's containing grid.

HTML

<ContentControl Name="MenuRegion" c:RegionManager.RegionName="MenuRegion" Margin="12,165,748,12" >
    <ContentControl.Template>
        <ControlTemplate TargetType="ContentControl">
            <Grid>
                <Controls:RoundedBox />
                <ContentPresenter Margin="10,0,10,0" Content="{TemplateBinding Content}" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="HasContent" Value="false">
                    <Setter Property="Visibility" Value="Collapsed" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ContentControl.Template>
</ContentControl>

I have a UserControl which is nothing more than a grid that contains a ListView to display the "menu" contents.

What I want to do is style the ListView so that it "disappears" into the containing control. I've searched on Google but all of the examples I find are more aimed at just styling the ListViewItem. I've seen one or two example of application that do this, but do not expose the underlying XAML. How do I style the ListView to become, essentially, invisible except for the ListViewItem contents? Do I have to also style the grid or does it stay out of the visual inheritance path?

Posted 31-May-12 9:02am

SASS_Shooter

Add a Solution

Comments

db7uk 31-May-12 15:10pm

Firstly, Great to see another Prism user. Love the framework. Ok, Before I post a dumb solution can I just clarify that you need to just style the listview so that it only shows the contents of the listview item (i.e. just a button)?

SASS_Shooter 31-May-12 15:17pm

Right now the ListView shows as a stark, white rectangle inside the very pretty floating control. I want the Listview to basically be 100% opaque (and my ListViewItems to also have an opaqueness to them) so that the control they are contained in appears to be holding the data instead of a control obviously sitting on top of it.

db7uk 31-May-12 15:30pm

mmmmm ok... I think I understand. having a think.

2 solutions

Solution 1

I think you need to create a transparent listviewItem like this:

XML

<style targettype="ListBoxItem">
                <style.resources>
                    <solidcolorbrush x:key="{x:Static SystemColors.HighlightBrushKey}" color="Transparent" xmlns:x="#unknown" />
                </style.resources>
            </style>

Once this is styled you wont have (shouldnt have) a highlight color. Next you can simply style the listview like so:

XML

<listbox itemssource="{Binding MenuItems}" background="Transparent" selectionmode="Single">
SelectedItem="{Binding SelectedItem}"></listbox>

Posted 31-May-12 9:17am

db7uk

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

SASS_Shooter · Accepted Answer · 2012-06-01T04:41:00

What I ended up doing was (really) quite simple. It ended up being more of understanding syntax more than anything else.

For my ListView I ended up having my definition implemented with specific brushes:

HTML

<ListView ItemTemplate="{StaticResource ResourceKey=DisplayInfo}" ItemsSource="{Binding Path=EventList}" Height="568" HorizontalAlignment="Left" VerticalAlignment="Top" Width="201" Margin="1,4,0,0">
    <ListView.BorderBrush>
        <SolidColorBrush />
    </ListView.BorderBrush>
    <ListView.Background>
        <SolidColorBrush Color="#99FFFFFF" Opacity=".8"/>
    </ListView.Background>
</ListView>

And as specified in an article I read, doing it with a brush assignment gives me the most performant implementation. It still comes out a touch lighter than the backing container, however it is opaque and looks natural. So just a little tweaking should get me where I need to be for the final product. :) It should also be noted for other readers that the Grid stays out of the way as far as the visual stack goes. So setting the listbox opaque gives me what I need without having the screw with any view settings on the Grid.

Getting my UserControl to display it's containing controls' background

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us