locked
Want to show list in Charm bar RRS feed

  • Question

  • Hi

    I am using CharmFlyoutLibrary in my app to show the charm bar and want to show list in it, it shows list but it keeps space on the left and right side of listitem, and I want to show the charmbar like windows default charm bar. How can we show list(listview/listbox) in charm bar like windows default charm bar list in my app.

    Regards

    Rishi

    Saturday, October 20, 2012 1:03 PM

Answers

  • Like i said, if you do something like this:

        <cfo:CharmFlyout
                x:Name="cfoSettings"
                Heading="My Flyout" Background="Cyan"
                HeadingBackgroundBrush="#FF4E0000">
                <StackPanel Background="Blue">
                    <ListBox Background="Red" >
                        <ListBoxItem Background="Yellow">item 1</ListBoxItem>
                        <ListBoxItem Background="Pink">item 2</ListBoxItem>
                        <ListBoxItem Background="Green">item 3</ListBoxItem>
                    </ListBox>
                </StackPanel>
                <cfo:CharmFlyout.Logo>
                    <Rectangle
                        Fill="Green"
                        Width="30"
                        Height="30" />
                </cfo:CharmFlyout.Logo>
            </cfo:CharmFlyout>

    the result is:


    This means the space between margin is from the charmFlyout's Style.

    If you use Padding="0" or Margin="0" it not solve nothing because the style don´t use it.

    Let's change this. First you can find the default stye:

      <Style
            TargetType="local:CharmFlyout">
            <Setter
                Property="Template">
                <Setter.Value>
                    <ControlTemplate
                        TargetType="local:CharmFlyout">
                        <Popup
                            Width="{TemplateBinding FlyoutWidth}"
                            Height="{TemplateBinding FlyoutHeight}"
                            IsOpen="{TemplateBinding IsOpen}"
                            IsLightDismissEnabled="True"
                            HorizontalAlignment="Right">
                            <Border
                                Width="{TemplateBinding FlyoutWidth}"
                                Height="{TemplateBinding FlyoutHeight}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition
                                            Height="80" />
                                        <RowDefinition
                                            Height="*" />
                                    </Grid.RowDefinitions>
                                    <Border
                                        Background="{TemplateBinding HeadingBackgroundBrush}">
                                        <Grid
                                            Margin="29,19,5,0">
                                            <Grid.Transitions>
                                                <TransitionCollection>
                                                    <EntranceThemeTransition />
                                                </TransitionCollection>
                                            </Grid.Transitions>
                                            <ContentPresenter
                                                Margin="0,0,10,0"
                                                Content="{TemplateBinding Logo}"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Right" />
                                            <StackPanel
                                                Orientation="Horizontal">
                                                <Button
                                                    Command="{TemplateBinding BackCommand}"
                                                    Style="{StaticResource BackButtonStyle}"
                                                    Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                                <TextBlock
                                                    Margin="0,10,0,5"
                                                    Text="{TemplateBinding Heading}"
                                                    VerticalAlignment="Top"
                                                    FontFamily="Segoe UI"
                                                    FontSize="28"
                                                    FontWeight="Thin"
                                                    LineHeight="30"
                                                    Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                            </StackPanel>
                                        </Grid>
                                    </Border>
                                    <Grid
                                        Grid.Row="1"
                                        Background="{TemplateBinding ContentBackgroundBrush}">
                                        <Rectangle
                                            Fill="{TemplateBinding ContentForegroundBrush}"
                                            Width="1"
                                            HorizontalAlignment="Left" />
                                        <Border
                                            Margin="40,26,30,30">
                                            <ContentPresenter
                                                Foreground="{TemplateBinding ContentForegroundBrush}">
                                                <ContentPresenter.Transitions>
                                                    <TransitionCollection>
                                                        <EntranceThemeTransition />
                                                    </TransitionCollection>
                                                </ContentPresenter.Transitions>
                                            </ContentPresenter>
                                        </Border>
                                    </Grid>
                                </Grid>
                            </Border>
                        </Popup>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    Where (right side!!)


    Like you see in left side you can see the code that define where the content is placed!

    And is this that makes these space.

      <Border  Margin="40,26,30,30">

    This is the style without white spaces: ( i don´t agree with remove this space, because it need margin space)

        <Style
            TargetType="local:CharmFlyout">
            <Setter
                Property="Template">
                <Setter.Value>
                    <ControlTemplate
                        TargetType="local:CharmFlyout">
                        <Popup
                            Width="{TemplateBinding FlyoutWidth}"
                            Height="{TemplateBinding FlyoutHeight}"
                            IsOpen="{TemplateBinding IsOpen}"
                            IsLightDismissEnabled="True"
                            HorizontalAlignment="Right">
                            <Border
                                Width="{TemplateBinding FlyoutWidth}"
                                Height="{TemplateBinding FlyoutHeight}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition
                                            Height="80" />
                                        <RowDefinition
                                            Height="*" />
                                    </Grid.RowDefinitions>
                                    <Border
                                        Background="{TemplateBinding HeadingBackgroundBrush}">
                                        <Grid
                                            Margin="29,19,5,0">
                                            <Grid.Transitions>
                                                <TransitionCollection>
                                                    <EntranceThemeTransition />
                                                </TransitionCollection>
                                            </Grid.Transitions>
                                            <ContentPresenter
                                                Margin="0,0,10,0"
                                                Content="{TemplateBinding Logo}"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Right" />
                                            <StackPanel
                                                Orientation="Horizontal">
                                                <Button
                                                    Command="{TemplateBinding BackCommand}"
                                                    Style="{StaticResource BackButtonStyle}"
                                                    Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                                <TextBlock
                                                    Margin="0,10,0,5"
                                                    Text="{TemplateBinding Heading}"
                                                    VerticalAlignment="Top"
                                                    FontFamily="Segoe UI"
                                                    FontSize="28"
                                                    FontWeight="Thin"
                                                    LineHeight="30"
                                                    Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                            </StackPanel>
                                        </Grid>
                                    </Border>
                                    <Grid
                                        Grid.Row="1"
                                        Background="{TemplateBinding ContentBackgroundBrush}">
                                        <Rectangle
                                            Fill="{TemplateBinding ContentForegroundBrush}"
                                            Width="1"
                                            HorizontalAlignment="Left" />
                                        <Border
                                            Margin="40,26,30,30">
                                            <ContentPresenter
                                                Foreground="{TemplateBinding ContentForegroundBrush}">
                                                <ContentPresenter.Transitions>
                                                    <TransitionCollection>
                                                        <EntranceThemeTransition />
                                                    </TransitionCollection>
                                                </ContentPresenter.Transitions>
                                            </ContentPresenter>
                                        </Border>
                                    </Grid>
                                </Grid>
                            </Border>
                        </Popup>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    Sara Silva

    My Windows 8 Store apps samples
    Follow me in twitter @saramgsilva


    • Edited by saramgsilva Saturday, October 20, 2012 7:43 PM
    • Marked as answer by RishiRajIT Monday, October 22, 2012 4:33 AM
    Saturday, October 20, 2012 7:16 PM

All replies

  • You need to get the code from codeplex and need to change the Default style for charmflyout. In this style you will see that space and can remove it.

     if it Don t silve the problem  you need to change the style for itemtemplante and containerstyle for liatview or listbox.

    With your code you need to see who make that space. Use colors for find it.


    Sara Silva

    My Windows 8 Store apps samples
    Follow me in twitter @saramgsilva
    • Edited by saramgsilva Saturday, October 20, 2012 7:39 PM
    Saturday, October 20, 2012 2:52 PM
  • Perhaps you can share your XAML and in addition to above please pay special attention to Margins.
    Saturday, October 20, 2012 5:15 PM
  • Like i said, if you do something like this:

        <cfo:CharmFlyout
                x:Name="cfoSettings"
                Heading="My Flyout" Background="Cyan"
                HeadingBackgroundBrush="#FF4E0000">
                <StackPanel Background="Blue">
                    <ListBox Background="Red" >
                        <ListBoxItem Background="Yellow">item 1</ListBoxItem>
                        <ListBoxItem Background="Pink">item 2</ListBoxItem>
                        <ListBoxItem Background="Green">item 3</ListBoxItem>
                    </ListBox>
                </StackPanel>
                <cfo:CharmFlyout.Logo>
                    <Rectangle
                        Fill="Green"
                        Width="30"
                        Height="30" />
                </cfo:CharmFlyout.Logo>
            </cfo:CharmFlyout>

    the result is:


    This means the space between margin is from the charmFlyout's Style.

    If you use Padding="0" or Margin="0" it not solve nothing because the style don´t use it.

    Let's change this. First you can find the default stye:

      <Style
            TargetType="local:CharmFlyout">
            <Setter
                Property="Template">
                <Setter.Value>
                    <ControlTemplate
                        TargetType="local:CharmFlyout">
                        <Popup
                            Width="{TemplateBinding FlyoutWidth}"
                            Height="{TemplateBinding FlyoutHeight}"
                            IsOpen="{TemplateBinding IsOpen}"
                            IsLightDismissEnabled="True"
                            HorizontalAlignment="Right">
                            <Border
                                Width="{TemplateBinding FlyoutWidth}"
                                Height="{TemplateBinding FlyoutHeight}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition
                                            Height="80" />
                                        <RowDefinition
                                            Height="*" />
                                    </Grid.RowDefinitions>
                                    <Border
                                        Background="{TemplateBinding HeadingBackgroundBrush}">
                                        <Grid
                                            Margin="29,19,5,0">
                                            <Grid.Transitions>
                                                <TransitionCollection>
                                                    <EntranceThemeTransition />
                                                </TransitionCollection>
                                            </Grid.Transitions>
                                            <ContentPresenter
                                                Margin="0,0,10,0"
                                                Content="{TemplateBinding Logo}"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Right" />
                                            <StackPanel
                                                Orientation="Horizontal">
                                                <Button
                                                    Command="{TemplateBinding BackCommand}"
                                                    Style="{StaticResource BackButtonStyle}"
                                                    Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                                <TextBlock
                                                    Margin="0,10,0,5"
                                                    Text="{TemplateBinding Heading}"
                                                    VerticalAlignment="Top"
                                                    FontFamily="Segoe UI"
                                                    FontSize="28"
                                                    FontWeight="Thin"
                                                    LineHeight="30"
                                                    Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                            </StackPanel>
                                        </Grid>
                                    </Border>
                                    <Grid
                                        Grid.Row="1"
                                        Background="{TemplateBinding ContentBackgroundBrush}">
                                        <Rectangle
                                            Fill="{TemplateBinding ContentForegroundBrush}"
                                            Width="1"
                                            HorizontalAlignment="Left" />
                                        <Border
                                            Margin="40,26,30,30">
                                            <ContentPresenter
                                                Foreground="{TemplateBinding ContentForegroundBrush}">
                                                <ContentPresenter.Transitions>
                                                    <TransitionCollection>
                                                        <EntranceThemeTransition />
                                                    </TransitionCollection>
                                                </ContentPresenter.Transitions>
                                            </ContentPresenter>
                                        </Border>
                                    </Grid>
                                </Grid>
                            </Border>
                        </Popup>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    Where (right side!!)


    Like you see in left side you can see the code that define where the content is placed!

    And is this that makes these space.

      <Border  Margin="40,26,30,30">

    This is the style without white spaces: ( i don´t agree with remove this space, because it need margin space)

        <Style
            TargetType="local:CharmFlyout">
            <Setter
                Property="Template">
                <Setter.Value>
                    <ControlTemplate
                        TargetType="local:CharmFlyout">
                        <Popup
                            Width="{TemplateBinding FlyoutWidth}"
                            Height="{TemplateBinding FlyoutHeight}"
                            IsOpen="{TemplateBinding IsOpen}"
                            IsLightDismissEnabled="True"
                            HorizontalAlignment="Right">
                            <Border
                                Width="{TemplateBinding FlyoutWidth}"
                                Height="{TemplateBinding FlyoutHeight}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition
                                            Height="80" />
                                        <RowDefinition
                                            Height="*" />
                                    </Grid.RowDefinitions>
                                    <Border
                                        Background="{TemplateBinding HeadingBackgroundBrush}">
                                        <Grid
                                            Margin="29,19,5,0">
                                            <Grid.Transitions>
                                                <TransitionCollection>
                                                    <EntranceThemeTransition />
                                                </TransitionCollection>
                                            </Grid.Transitions>
                                            <ContentPresenter
                                                Margin="0,0,10,0"
                                                Content="{TemplateBinding Logo}"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Right" />
                                            <StackPanel
                                                Orientation="Horizontal">
                                                <Button
                                                    Command="{TemplateBinding BackCommand}"
                                                    Style="{StaticResource BackButtonStyle}"
                                                    Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                                <TextBlock
                                                    Margin="0,10,0,5"
                                                    Text="{TemplateBinding Heading}"
                                                    VerticalAlignment="Top"
                                                    FontFamily="Segoe UI"
                                                    FontSize="28"
                                                    FontWeight="Thin"
                                                    LineHeight="30"
                                                    Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                            </StackPanel>
                                        </Grid>
                                    </Border>
                                    <Grid
                                        Grid.Row="1"
                                        Background="{TemplateBinding ContentBackgroundBrush}">
                                        <Rectangle
                                            Fill="{TemplateBinding ContentForegroundBrush}"
                                            Width="1"
                                            HorizontalAlignment="Left" />
                                        <Border
                                            Margin="40,26,30,30">
                                            <ContentPresenter
                                                Foreground="{TemplateBinding ContentForegroundBrush}">
                                                <ContentPresenter.Transitions>
                                                    <TransitionCollection>
                                                        <EntranceThemeTransition />
                                                    </TransitionCollection>
                                                </ContentPresenter.Transitions>
                                            </ContentPresenter>
                                        </Border>
                                    </Grid>
                                </Grid>
                            </Border>
                        </Popup>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    Sara Silva

    My Windows 8 Store apps samples
    Follow me in twitter @saramgsilva


    • Edited by saramgsilva Saturday, October 20, 2012 7:43 PM
    • Marked as answer by RishiRajIT Monday, October 22, 2012 4:33 AM
    Saturday, October 20, 2012 7:16 PM
  • Thanks Sara

    Your solution works.

    Monday, October 22, 2012 4:38 AM
  • Sara's reply got me wondering if the content padding should be a settable property... So, as of now, CharmFlyout sports a new property called ContentPadding. By default, ContentPadding is "40, 26, 30, 30".  For your purposes, you could set ContentPadding="0" in your XAML.

    Also, I added another property to CharmFlyout called IsOpenChanged. This will allow you to be notified when the flyout opens or closes (whether by hitting the back button or light-dismiss). Some people claim they need to do some actions (like save data) when the flyout closes. I hope this helps.

    Binary: https://nuget.org/packages/CharmFlyout

    Source: http://charmflyout.codeplex.com

    Discussion: http://w8isms.blogspot.com/2012/07/charmflyout-another-charming.html

    - John


    John Michael Hauck

    Wednesday, October 24, 2012 6:58 PM
  • Is great John! And great project, i like it :)


    Sara Silva
    My Windows 8 Store Apps Samples
    Follow me in Twitter @saramgsilva

    My Windows 8 Store Apps: Female Pill | Galinho (Tic tac Toe) | 24
    (If my reply answers your question, please propose it as an answer because it will help other users)

    Wednesday, October 24, 2012 7:19 PM