Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
40
xamCarouselListBox and zOrder
posted

I am evaluating the Beta xamCarouselListBox and it appears that it ignores the zOrder settings in the CarouselViewSettings.  I am setting UseZOrder to true and have a collection of ZOrderEffectsStops.  It is essentially a slight modification of the SkewXEffect Sample for the xamCarouselPanel (which does work).  The xamCarouselListBox seems to simply arrange zOrder after the order in the list.  Is this the intended behavior for this control?

 I've pasted the code I am using below

 Thanks.

<UserControl x:Class="LdsChurch.MSStack.Samples.HomeTeach.UI.People.PersonSearchView"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:igWindows="http://infragistics.com/Windows"

xmlns:igDP="http://infragistics.com/DataPresenter"

xmlns:igEditors="http://infragistics.com/Editors"

xmlns:igChart="http://infragistics.com/Chart" xmlns:my="clr-namespace:System;assembly=mscorlib">

<UserControl.Resources >

<Path x:Key="customPath" xmlns:Fill="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Margin="7.5,151.5,-0.5,0" x:Name="customPath" VerticalAlignment="Top" Height="1" Data="M8,152 L400,152" Visibility="Hidden"/>

<Path x:Key="customHPath" xmlns:Fill="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Margin="151.5,7.5,-0.5,0" x:Name="customHPath" HorizontalAlignment="Left" Width="1" Data="M152,8 L152,400" Visibility="Hidden"/>

<igWindows:CarouselViewSettings x:Key ="itunesHViewSettings"

AutoScaleItemContentsToFit="True"

ItemPath="{StaticResource customHPath}"

ItemPathHorizontalAlignment="Stretch"

ItemPathVerticalAlignment="Stretch"

ItemSize="505,505"

ItemTransitionStyle="AdjustOpacity"

UseOpacity="True"

UseSkewing="True"

UseZOrder="True"

IsListContinuous="True"

ItemsPerPage="5"

ItemPathAutoPad="False"

ItemPathPadding="0,0,0,70"

ScalingEffectStopDirection="UseItemPath"

UseScaling="True"

AllowDrop="True">

<igWindows:CarouselViewSettings.ScalingEffectStops>

<igWindows:ScalingEffectStop Offset="0.0" Value="0.4"/>

<igWindows:ScalingEffectStop Offset="0.4" Value="0.4"/>

<igWindows:ScalingEffectStop Offset="0.5" Value="1.0"/>

<igWindows:ScalingEffectStop Offset="0.6" Value="0.4"/>

<igWindows:ScalingEffectStop Offset="1.0" Value="0.4"/>

</igWindows:CarouselViewSettings.ScalingEffectStops>

<igWindows:CarouselViewSettings.OpacityEffectStops>

<igWindows:OpacityEffectStop Offset=".15" Value="1"/>

<igWindows:OpacityEffectStop Offset=".5" Value="1"/>

<igWindows:OpacityEffectStop Offset=".85" Value="1"/>

</igWindows:CarouselViewSettings.OpacityEffectStops>

<igWindows:CarouselViewSettings.SkewAngleXEffectStops>

<igWindows:SkewAngleXEffectStop Offset="0.15" Value="20"/>

<igWindows:SkewAngleXEffectStop Offset="0.45" Value="20"/>

<igWindows:SkewAngleXEffectStop Offset="0.5" Value="0"/>

<igWindows:SkewAngleXEffectStop Offset="0.55" Value="-20"/>

<igWindows:SkewAngleXEffectStop Offset="0.85" Value="-20"/>

</igWindows:CarouselViewSettings.SkewAngleXEffectStops>

<igWindows:CarouselViewSettings.ZOrderEffectStops>

<igWindows:ZOrderEffectStop x:Uid="igWindows:ZOrderEffectStop_1"/>

<igWindows:ZOrderEffectStop x:Uid="igWindows:ZOrderEffectStop_2" Offset="0.5" Value="1"/>

<igWindows:ZOrderEffectStop x:Uid="igWindows:ZOrderEffectStop_3" Offset="1"/>

</igWindows:CarouselViewSettings.ZOrderEffectStops></igWindows:CarouselViewSettings>

 

 

<
igWindows:CarouselViewSettings x:Key ="itunesViewSettings" AutoScaleItemContentsToFit="True" ItemPath="{StaticResource customPath}"

ItemPathHorizontalAlignment="Stretch" ItemPathVerticalAlignment="Stretch"

ItemSize="305,305" ItemTransitionStyle="AdjustOpacity" UseOpacity="True" UseSkewing="True"

UseZOrder="False" IsListContinuous="True" ItemsPerPage="9" ItemPathAutoPad="False" ItemPathPadding="0,0,0,70" ScalingEffectStopDirection="UseItemPath" UseScaling="True" AllowDrop="True">

<igWindows:CarouselViewSettings.ScalingEffectStops>

<igWindows:ScalingEffectStop Offset="0.0" Value="0.4"/>

<igWindows:ScalingEffectStop Offset="0.4" Value="0.4"/>

<igWindows:ScalingEffectStop Offset="0.5" Value="1.0"/>

<igWindows:ScalingEffectStop Offset="0.6" Value="0.4"/>

<igWindows:ScalingEffectStop Offset="1.0" Value="0.4"/>

</igWindows:CarouselViewSettings.ScalingEffectStops>

<igWindows:CarouselViewSettings.OpacityEffectStops>

<igWindows:OpacityEffectStop Offset=".15" Value="1"/>

<igWindows:OpacityEffectStop Offset=".5" Value="1"/>

<igWindows:OpacityEffectStop Offset=".85" Value="1"/>

</igWindows:CarouselViewSettings.OpacityEffectStops>

<igWindows:CarouselViewSettings.SkewAngleYEffectStops>

<igWindows:SkewAngleYEffectStop Offset="0.15" Value="-20"/>

<igWindows:SkewAngleYEffectStop Offset="0.45" Value="-20"/>

<igWindows:SkewAngleYEffectStop Offset="0.5" Value="0"/>

<igWindows:SkewAngleYEffectStop Offset="0.55" Value="20"/>

<igWindows:SkewAngleYEffectStop Offset="0.85" Value="20"/>

</igWindows:CarouselViewSettings.SkewAngleYEffectStops>

<igWindows:CarouselViewSettings.ZOrderEffectStops>

<igWindows:ZOrderEffectStop/>

<igWindows:ZOrderEffectStop Offset="0.5" Value="1"/>

<igWindows:ZOrderEffectStop Offset="1"/>

</igWindows:CarouselViewSettings.ZOrderEffectStops>

</igWindows:CarouselViewSettings>

</UserControl.Resources>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="50" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition /></Grid.ColumnDefinitions>

 

<
igWindows:XamCarouselListBox Grid.Row="1" Name="PersonCarousel" ViewSettings="{StaticResource itunesViewSettings}">

 

<igWindows:XamCarouselListBox.ItemTemplate>

<DataTemplate>

<StackPanel >

<Label Content="{Binding Path=Name}"/>

<Image Height="100" Source="{Binding Path=FullImagePath}"/>

<Label Content="{Binding Path=PicturePath}"/>

</StackPanel>

</DataTemplate>

</igWindows:XamCarouselListBox.ItemTemplate>

</igWindows:XamCarouselListBox>

 

<
StackPanel Grid.Row ="0" Orientation="Horizontal">

<ComboBox Height="26" HorizontalAlignment="Left" Name="pickViewSettings" VerticalAlignment="Top" Width="121" >

<my:String>test</my:String>

<my:String>test1</my:String>

</ComboBox><Label Content="Layout Settings"/>

 

</StackPanel>

<!-- <Label Name="PersonResult" Content="Place your controls here" /> -->

</Grid>

</UserControl>

Parents
  • 8576
    Offline posted

    Hi Matt -

    Looking at your sample code, it appears that the XamCarouselListBox 'PersonCarousel' is using the ViewSettings resource called 'itunesViewSettings'.  The problem is that itunesViewSettings has UseZOrder set to false.  Perhaps you intended to use the other ViewSettings resource called itunesHViewSettings?

    Setting UseZOrder to true should fix the problem.

     

Reply
  • 40
    posted in reply to Joe Modica

    Hi Joe,

    Thanks for responding. Apologies for that.  It looks like I might have pasted some code that was in transtion.  Anyway,  I cleaned up the code a bit and I am still seeing the problem.  Just to make sure I am not going crazy I had a xamCarouselListBox and a xamCarouselPanel use the same CarouselViewSettings.  I also took out the data binding just to make sure that wasn't the issue.   I display both controls on the form and the xamCarouselPanel exhibits the expected zorder behavoir, but the xamCarouselListBox does not.  I've pasted the XAML and the code I use to populate the controls below:

    I have a screenshot.  I've uploaded it here:

    http://public.box.net/box46746

    thx.

     

     <UserControl x:Class="LdsChurch.MSStack.Samples.HomeTeach.UI.People.PersonSearchView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:igWindows="http://infragistics.com/Windows"
        xmlns:igDP="http://infragistics.com/DataPresenter"
        xmlns:igEditors="http://infragistics.com/Editors"
        xmlns:igChart="http://infragistics.com/Chart" xmlns:my="clr-namespace:System;assembly=mscorlib">

      <UserControl.Resources >
        <Path  x:Key="customPath" xmlns:Fill="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Margin="7.5,151.5,-0.5,0" x:Name="customPath" VerticalAlignment="Top" Height="1" Data="M8,152 L400,152" Visibility="Hidden"/>
        <igWindows:CarouselViewSettings x:Key ="itunesViewSettings"
                                        AutoScaleItemContentsToFit="True"
                                        ItemPath="{StaticResource customPath}"
                                        ItemPathHorizontalAlignment="Stretch"
                                        ItemPathVerticalAlignment="Stretch"
                                        ItemSize="505,505"
                                        ItemTransitionStyle="AdjustOpacity"
                                        UseOpacity="True"
                                        UseSkewing="True"
                                        UseZOrder="True"
                                        IsListContinuous="True"
                                        ItemsPerPage="9"
                                        ItemPathAutoPad="False"
                                        ItemPathPadding="0,0,0,70"
                                        ScalingEffectStopDirection="UseItemPath"
                                        UseScaling="True"
                                        AllowDrop="True">
            <igWindows:CarouselViewSettings.ScalingEffectStops>
              <igWindows:ScalingEffectStop Offset="0.0" Value="0.4"/>
              <igWindows:ScalingEffectStop Offset="0.4" Value="0.4"/>
              <igWindows:ScalingEffectStop Offset="0.5" Value="1.0"/>
              <igWindows:ScalingEffectStop Offset="0.6" Value="0.4"/>
              <igWindows:ScalingEffectStop Offset="1.0" Value="0.4"/>
            </igWindows:CarouselViewSettings.ScalingEffectStops>
            <igWindows:CarouselViewSettings.OpacityEffectStops>
              <igWindows:OpacityEffectStop Offset=".15" Value="1"/>
              <igWindows:OpacityEffectStop Offset=".5" Value="1"/>
              <igWindows:OpacityEffectStop Offset=".85" Value="1"/>
            </igWindows:CarouselViewSettings.OpacityEffectStops>
            <igWindows:CarouselViewSettings.SkewAngleYEffectStops>
              <igWindows:SkewAngleYEffectStop Offset="0.15" Value="-20"/>
              <igWindows:SkewAngleYEffectStop Offset="0.45" Value="-20"/>
              <igWindows:SkewAngleYEffectStop Offset="0.5" Value="0"/>
              <igWindows:SkewAngleYEffectStop Offset="0.55" Value="20"/>
              <igWindows:SkewAngleYEffectStop Offset="0.85" Value="20"/>
            </igWindows:CarouselViewSettings.SkewAngleYEffectStops>
            <igWindows:CarouselViewSettings.ZOrderEffectStops>
              <igWindows:ZOrderEffectStop x:Uid="igWindows:ZOrderEffectStop_1"/>
              <igWindows:ZOrderEffectStop x:Uid="igWindows:ZOrderEffectStop_2" Offset="0.5" Value="1"/>
              <igWindows:ZOrderEffectStop x:Uid="igWindows:ZOrderEffectStop_3" Offset="1"/>
            </igWindows:CarouselViewSettings.ZOrderEffectStops>
          </igWindows:CarouselViewSettings>
       
      
      </UserControl.Resources>
        <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="50" />
          <RowDefinition Height="400" />
          <RowDefinition Height="400"/>
        </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

          <igWindows:XamCarouselListBox  Grid.Row="1" Name="PersonCarousel" ViewSettings="{StaticResource itunesViewSettings}"/>
          <igWindows:XamCarouselPanel  Grid.Row="2" Name="PersonCarouselPanel" ViewSettings="{StaticResource itunesViewSettings}"/>

          <StackPanel Grid.Row ="0" Orientation="Horizontal">
          <ComboBox Height="26" HorizontalAlignment="Left" Name="pickViewSettings" VerticalAlignment="Top" Width="121" >
            <my:String>test</my:String>
            <my:String>test1</my:String>
          </ComboBox>
          <Label Content="Layout Settings"/>
           
          </StackPanel>

          <!-- <Label Name="PersonResult" Content="Place your controls here" /> -->
        </Grid>
    </UserControl>

     

    ----------------------

    code snippet that populates the data

    foreach (PersonSearchResultBinder result in res)

    {

    StackPanel sp = new StackPanel();

    Label NameLabel = new Label(); NameLabel.Content = result.Name; sp.Children.Add(NameLabel);

    Image image = new Image(); image.Source = new BitmapImage(new Uri(result.FullImagePath)); sp.Children.Add(image);

    Label pathLabel = new Label(); pathLabel.Content = result.FullImagePath; sp.Children.Add(pathLabel);

    this.PersonCarousel.Items.Add(sp);

    sp = new StackPanel();

    NameLabel = new Label(); NameLabel.Content = result.Name; sp.Children.Add(NameLabel);

    image = new Image(); image.Source = new BitmapImage(new Uri(result.FullImagePath)); sp.Children.Add(image);

    pathLabel = new Label(); pathLabel.Content = result.FullImagePath; sp.Children.Add(pathLabel);this.PersonCarouselPanel.ChildElements.Add(sp);

    }

     

     

     

     

Children