locked
Windows 8 Metro Style - ListBox selected style RRS feed

  • Question

  • Hi Guys;

    I am busy developing a windows 8 metro style Rss Syndication news feed reader application for the windows 8 app store. I am experience difficulties having a listbox inside a flipview control. The issue i am battling with is when you select an item in the listbox, the listbox became white. So it looks like the selected style change and the selected styles background is white. How can i manipulate the selected listbox items template? So that the listbox does not became white?

    Thanks

    Raymen Boshoff

    Windows 8 Developer

    Listbox selected white


    Senior C# Windows 8 Developer

    Monday, September 17, 2012 8:53 PM

Answers

  • I'm not sure this has anything to do with being in a FlipView. The default style for the ListBox has a white background when focused, although the foreground shouldn't be white unless you are overriding it. It might help if you could post minimal sample code which demonstrates how you are generating this.

    You can change the focus behavior by overriding the ListBox's template's Focused VisualState or by changing the ListBoxFocusBackgroundThemeBrush that it uses. You can edit the template by selecting it in the designer and using the Edit Template... context menu. See Adding and styling controls for more information.

    --Rob

    • Marked as answer by Raymen Boshoff Tuesday, September 18, 2012 8:54 AM
    Tuesday, September 18, 2012 3:12 AM
    Moderator
  • Hi Rob;

    I cannot see the ListBoxFocusBackgroundThemeBrush  theme in standardstyles.xaml. Below is a the xaml page i am using. I have also attached a picture to show you realtime whats happening. The bold section is where i initialize my listbox with properties.

    <UserControl
        x:Class="WaggleNewsAggregator.UserControls.CategoryFilterUserControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:WaggleNewsAggregator.UserControls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="500"
        d:DesignWidth="600">
        
        <UserControl.Resources>
            <Style x:Key="SaveAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
                <Setter Property="AutomationProperties.AutomationId" Value="SaveAppBarButton"/>
                <Setter Property="AutomationProperties.Name" Value="Apply"/>
                <Setter Property="Content" Value="&#xE105;"/>
            </Style>
            <Style TargetType="ListBoxItem">
                <Setter Property="Foreground" Value="Black" />
            </Style>
        </UserControl.Resources>
        
        <Grid Style="{StaticResource LayoutRootStyle}" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="120"/>
            </Grid.RowDefinitions>

            <FlipView x:Name="FlipView1" Width="600" Height="500" BorderBrush="Black"  >
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="grdItems">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="300"/>
                                <ColumnDefinition Width="300"/>
                            </Grid.ColumnDefinitions>
                            <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom" Grid.ColumnSpan="3">
                                <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20"/>
                            </Border>
                            <ListBox x:Name="lbLeftItems" 
                                     ItemsSource="{Binding LeftFilters}" 
                                     Margin="75" 
                                     Grid.Column="0" 
                                     Background="Transparent" 
                                     Foreground="Red" 
                                     Width="300" 
                                     Height="450"/>
                            <ListBox x:Name="lbMiddletItems" 
                                     ItemsSource="{Binding MiddleFilters}" 
                                     Margin="75" 
                                     Grid.Column="1" 
                                     Background="Transparent" 
                                     Foreground="Red" 
                                     Width="300" 
                                     Height="450"/>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
            
            <!--Grid Row 1-->
            <StackPanel Orientation="Horizontal" Grid.Row="1">
                <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" HorizontalAlignment="Right" Tag="Save" Click="Save_click" Height="87" VerticalAlignment="Top" Foreground="Black"  />
            </StackPanel>
        </Grid>
    </UserControl>



    Senior C# Windows 8 Developer, SSIS, SSRS, SQL Srver 2008 R2, C#, VB.Net, ASP.Net Java, JQuery, JS, MVC, WPF, WCF Agile

    • Marked as answer by Raymen Boshoff Tuesday, September 18, 2012 8:53 AM
    Tuesday, September 18, 2012 8:24 AM
  • Hi Guys;

    I Finally got the solution. Thanks Rob the blend worked 100% fine and create a static xaml structure. I have also make use of resource dictionary https://gist.github.com/2308859

    Thanks


    Senior C# Windows 8 Developer, SSIS, SSRS, SQL Srver 2008 R2, C#, VB.Net, ASP.Net Java, JQuery, JS, MVC, WPF, WCF Agile

    • Marked as answer by Raymen Boshoff Tuesday, September 18, 2012 8:53 AM
    Tuesday, September 18, 2012 8:53 AM
  • Hi Verma;

    What you do is open the page by right click and open with Blend. Within blend you will see in toolbox you can add a lisbox. When you add the listbox using blend it will automatically add all the xaml properties and methods for you. Making use of this https://gist.github.com/2308859 you can then change the styles of these static xaml created by blend.

    Thanks

    Raymen Boshoff


    Senior C# Windows 8 Developer, SSIS, SSRS, SQL Srver 2008 R2, C#, VB.Net, ASP.Net Java, JQuery, JS, MVC, WPF, WCF Agile

    • Marked as answer by Raymen Boshoff Thursday, November 22, 2012 10:01 AM
    Wednesday, October 10, 2012 5:57 AM

All replies

  • I'm not sure this has anything to do with being in a FlipView. The default style for the ListBox has a white background when focused, although the foreground shouldn't be white unless you are overriding it. It might help if you could post minimal sample code which demonstrates how you are generating this.

    You can change the focus behavior by overriding the ListBox's template's Focused VisualState or by changing the ListBoxFocusBackgroundThemeBrush that it uses. You can edit the template by selecting it in the designer and using the Edit Template... context menu. See Adding and styling controls for more information.

    --Rob

    • Marked as answer by Raymen Boshoff Tuesday, September 18, 2012 8:54 AM
    Tuesday, September 18, 2012 3:12 AM
    Moderator
  • Hi Rob;

    I cannot see the ListBoxFocusBackgroundThemeBrush  theme in standardstyles.xaml. Below is a the xaml page i am using. I have also attached a picture to show you realtime whats happening. The bold section is where i initialize my listbox with properties.

    <UserControl
        x:Class="WaggleNewsAggregator.UserControls.CategoryFilterUserControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:WaggleNewsAggregator.UserControls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="500"
        d:DesignWidth="600">
        
        <UserControl.Resources>
            <Style x:Key="SaveAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
                <Setter Property="AutomationProperties.AutomationId" Value="SaveAppBarButton"/>
                <Setter Property="AutomationProperties.Name" Value="Apply"/>
                <Setter Property="Content" Value="&#xE105;"/>
            </Style>
            <Style TargetType="ListBoxItem">
                <Setter Property="Foreground" Value="Black" />
            </Style>
        </UserControl.Resources>
        
        <Grid Style="{StaticResource LayoutRootStyle}" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="120"/>
            </Grid.RowDefinitions>

            <FlipView x:Name="FlipView1" Width="600" Height="500" BorderBrush="Black"  >
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid x:Name="grdItems">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="300"/>
                                <ColumnDefinition Width="300"/>
                            </Grid.ColumnDefinitions>
                            <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom" Grid.ColumnSpan="3">
                                <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="26.667" Foreground="#CCFFFFFF" Padding="15,20"/>
                            </Border>
                            <ListBox x:Name="lbLeftItems" 
                                     ItemsSource="{Binding LeftFilters}" 
                                     Margin="75" 
                                     Grid.Column="0" 
                                     Background="Transparent" 
                                     Foreground="Red" 
                                     Width="300" 
                                     Height="450"/>
                            <ListBox x:Name="lbMiddletItems" 
                                     ItemsSource="{Binding MiddleFilters}" 
                                     Margin="75" 
                                     Grid.Column="1" 
                                     Background="Transparent" 
                                     Foreground="Red" 
                                     Width="300" 
                                     Height="450"/>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
            
            <!--Grid Row 1-->
            <StackPanel Orientation="Horizontal" Grid.Row="1">
                <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" HorizontalAlignment="Right" Tag="Save" Click="Save_click" Height="87" VerticalAlignment="Top" Foreground="Black"  />
            </StackPanel>
        </Grid>
    </UserControl>



    Senior C# Windows 8 Developer, SSIS, SSRS, SQL Srver 2008 R2, C#, VB.Net, ASP.Net Java, JQuery, JS, MVC, WPF, WCF Agile

    • Marked as answer by Raymen Boshoff Tuesday, September 18, 2012 8:53 AM
    Tuesday, September 18, 2012 8:24 AM
  • Hi Guys;

    I Finally got the solution. Thanks Rob the blend worked 100% fine and create a static xaml structure. I have also make use of resource dictionary https://gist.github.com/2308859

    Thanks


    Senior C# Windows 8 Developer, SSIS, SSRS, SQL Srver 2008 R2, C#, VB.Net, ASP.Net Java, JQuery, JS, MVC, WPF, WCF Agile

    • Marked as answer by Raymen Boshoff Tuesday, September 18, 2012 8:53 AM
    Tuesday, September 18, 2012 8:53 AM
  • how you create static xaml...may you tell me plzz.. I am facing same problem..

    Tuesday, October 9, 2012 1:23 PM
  • Hi Verma;

    What you do is open the page by right click and open with Blend. Within blend you will see in toolbox you can add a lisbox. When you add the listbox using blend it will automatically add all the xaml properties and methods for you. Making use of this https://gist.github.com/2308859 you can then change the styles of these static xaml created by blend.

    Thanks

    Raymen Boshoff


    Senior C# Windows 8 Developer, SSIS, SSRS, SQL Srver 2008 R2, C#, VB.Net, ASP.Net Java, JQuery, JS, MVC, WPF, WCF Agile

    • Marked as answer by Raymen Boshoff Thursday, November 22, 2012 10:01 AM
    Wednesday, October 10, 2012 5:57 AM
  • Personally, I feel this is completely frustrating.  I'm creating a simple line of business app, and I'm no designer.  This means that I rely on reasonable defaults for all controls, and I never change a color, ever (it will only look worse).

    What my app currently looks like is unusable -- I have an "edit details" list box that gets created in code.  The details box include somie check boxes.  And right now, whenever the user clicks on a check box, the entire part of the screen turns white.  Not only does this look horrible, but the text vanishes (and no, I don't set the text color)

    My solution is going to be hideous: I'm going to set the text to green.  It will look bad when the background is black, and it will look bad when the background is white.  But at least it will be visible.

    Why doesn't the "solution" work for me?  Because it requires multiple steps, all of them unfamiliar.  I managed to run blend (for a change, it didn't crash).  I even followed some of the steps: I made a list item, and created the template.  but then, when I exit, my files haven't changed.  "Save all" didn't save anything different. So now, either nothing actually happened, or (more likely) I've just screwed up some system file.

    The concept of a list box that, by default, is unusable is terrible.  The idea that changing the list box is virtually impossible for non-expert designers is embarrassing.  We should do better than this.

    Wednesday, November 21, 2012 7:33 PM
  • @Peter (and everyone else) - for nearly all general use cases in Windows 8, the ListBox has supersecceded by the ListView control. Use that instead - it has perfectly workable default themes designed especially for Windows 8, and has nearly the same syntax as the ListBox (and the handy additions of built in grouping, semantic zoom support and Item Click events, if you care for any of those)



    Wednesday, November 21, 2012 7:39 PM
  • Hi Peter;

    I have been making use of this helpful dictionaries and it worked for me : https://gist.github.com/2308859

    Using Blend to initialize the lisbox with all its behavior, properties and events you can easily change the style by using the above mentioned library.

    Work OK for me.

    Cheers Raymen Boshoff


    Senior C# Windows 8 Developer, SSIS, SSRS, SQL Srver 2008 R2, C#, VB.Net, ASP.Net Java, JQuery, JS, MVC, WPF, WCF Agile

    Thursday, November 22, 2012 10:04 AM