CODEWITHSUNDEEP
windows-phone-7windows-phone-8
Matthew
Matthew

Reputation: 4056

How to Adjust Background of ListBox

I am wondering how to change and adjust the background of a ListBox, not of a ListBoxItem. I would like the background to be PhoneChromeBrush with an opacity of .5. The ListBox is actually overlayed partially on a picture, and so the effect I'm trying to accomplish is that where the ListBox overlays the image, I would like the user to still be able to see the item through the ListBox but with a tinted effect, while the items in the ListBox are 100% opaque (opacity=1.0). I am not sure how to change the ListBox's background in this way while keeping the items completely solid and visible.

EDIT

<Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="105"/>
            <RowDefinition Height="75"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0" Grid.ColumnSpan="4" Grid.RowSpan="2" Name="ViewportContainer">
            <Image x:Name="Viewport" LayoutUpdated="Viewport_LayoutUpdated" 
                           Source="{Binding}"
                   toolkit:TiltEffect.IsTiltEnabled="True"/>
        </Grid>

        <ListBox Grid.Row="1" Grid.ColumnSpan="4" x:Name="ListBox" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}"
                     toolkit:TiltEffect.IsTiltEnabled="True" SelectionChanged="ListBox_SelectionChanged" 
                         Visibility="Collapsed" 
                 ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Margin="1,0,0,0">
                        <Image Source="{Binding Thumbnail}" Width="100" Height="100" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Upvotes: 0

Views: 315

Answers (3)

Justice
Justice

Reputation: 442

If you want to get the template of the listbox which you are using, there is an incredibly easy way to do that Locate the listbox you want the template of in the designer right click on the ListBox in the menu goto EditTemplate>Edit A Copy this will generate a copy of the currently used template in the resources of the page

Upvotes: 1

imthegiga
imthegiga

Reputation: 1126

If you want Phone's background color (light / dark) not the accent color (cyan, red, nokia blue, yellow bla bla) its simple to find. You need to put these attributes into ListBox tag in your xaml-

Background="{StaticResource PhoneBackgroundBrush}" Opacity="0.5"

This will set Phone's background color to your listbox, either dark or light.

If you want your listbox's background to be Phone's accent color, you can get it by code-

Color AccentColor = (System.Windows.Media.Color)Application.Current.Resources["PhoneAccentColor"];

This will return Phone's current accent color. Now you want opacity of 0.5. To do that you can do,

AccentColor.A = (byte) 127;

A is for alpha / opacity and ranges from 0 to 255 (byte). All the ARGB values are already assigned, only you need to change the opacity (A) value as per you requirement.

Now you can put this AccentColor as Brush. To change the listbox's background,

myListBox.Background = new SolidColorBrush(AccentColor);

The problem I got is, to listbox's background returns Brush not Color so

when you say {StaticResource PhoneBackgroundBrush} it internally takes it as,

myListBox.Background = (System.Windows.Media.Brush)Application.Current.Resources["PhoneBackgroundBrush"];

this is not in case when you want to put accent color as background, because {StaticResource PhoneAccentColor} or Application.Current.Resources["PhoneAccentColor"] returns color and we are assigning color to a Brush (listbox's background)! That's why when you set listbox's background as accent color like {StaticResource PhoneAccentColor} it'll crash application. Till now I don't know how to put accent color via xaml code. Sorry for that. Hope this helps.

Upvotes: 1

siger
siger

Reputation: 3162

If your goal is to have ListBoxItems with a solid background, but the ListBox itself be translucid, try setting the background of the ListBox in this way. Children controls won't inherit the opacity.

<ListBox>
     <ListBox.Background>
        <SolidColorBrush Color="Green" Opacity="0.5"/>
    </ListBox.Background>
    <ListBox.Items>
        <ListBoxItem Background="Red" Margin="10">Item</ListBoxItem>
    </ListBox.Items>
</ListBox>

Upvotes: 1

Related Questions