Forums Ultimate UI for WPF
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
Close
Darcy
465
XamDataCarousel Items off center.. or is padded.. or has a margin
posted

I'm using an XamDataCarousel.. I'll put a sample part of the code at the bottom.

The issue is when I output the grid each CarouselItem which is off center by about 5 pixels from the actual item (You can see the outline of the item). It is subtle when displayed, but it becomes very obvious when I make a selection and is outlined.

 I end up with an image that looks like it has some margin or padding.. I've tried adjusting Margin, Size, Padding etc.. in the canvas, the rectangle and the carouselitem without success.

 

off center

 

 

<igDP:XamDataCarousel Opacity=".95" Background="Beige" Grid.Column="1" Grid.Row="1" MouseDown="XamDataCarousel1_MouseDown" SelectedItemsChanged="XamDataCarousel1_SelectedItemsChanged" Height="Auto" Width="Auto" MouseDoubleClick="XamDataCarousel1_MouseDoubleClick" x:Uid="igDP:XamDataCarousel_1" x:Name="XamDataCarousel1" Margin="0,0,0,0" Theme="Office2k7Silver" GroupByAreaLocation="None">
<igDP:XamDataCarousel.ViewSettings>
<igWindows:CarouselViewSettings x:Uid="igWindows:CarouselViewSettings_1" IsListContinuous="True" ItemPath="{Binding ElementName=circlePath, Mode=OneWay}" ItemsPerPage="10" OpacityEffectStopDirection="UseItemPath" ScalingEffectStopDirection="UseItemPath" UseOpacity="True" ItemPathPadding="0,0,0,152" ItemPathPrefixPercent="0" ItemPathSuffixPercent="0.15" ItemHorizontalScrollBarVisibility="Hidden" ItemVerticalScrollBarVisibility="Hidden" ItemSize="120,120" >
<igWindows:CarouselViewSettings.ItemPathRenderPen>
<Pen x:Uid="Pen_1" Brush="#FF000000" Thickness="0"/>
</igWindows:CarouselViewSettings.ItemPathRenderPen>
</igWindows:CarouselViewSettings>
</igDP:XamDataCarousel.ViewSettings>

 

<Canvas Width="120" Height="120" Background="Beige">
<Rectangle Width="120" Height="120" RadiusX="20" RadiusY="20">
<Rectangle.Fill>
<ImageBrush ImageSource="images\australia.jpg"/>
</Rectangle.Fill>
</Rectangle>
</Canvas>

 

 

 

<Canvas HorizontalAlignment="Left" Margin="0" Width="120" Height="120" Background="Red">
<Rectangle Stroke="Blue" StrokeThickness="2" Width="120" Height="120" RadiusX="20" RadiusY="20">
<Rectangle.Fill>
<ImageBrush ImageSource="images\southamerica.jpg"/>
</Rectangle.Fill>
</Rectangle>
</Canvas>

 

 

 

  • 8576
    Verified Answer
    Offline posted
    Hi -
     
    Hmmm ... looks like we have a Margin of 5,0,0,0 on the default template for the CellValuePresenter.  Not sure why this is there.  The way to get around this is to add the following resource somewhere in your app:
     

    <Style x:Key="cvpStyle" TargetType="{x:Type igDP:CellValuePresenter}">

    <Setter Property="Padding" Value="0,0,0,0"/>

    </Style>

     
    Then tell the XamDataCarousel to use this CellValuePresenter style by adding the following XAML inside the XAML definition for your XamDataCarousel:
     

    <igDP:XamDataCarousel.FieldSettings>

    <igDP:FieldSettings CellValuePresenterStyle="{StaticResource cvpStyle}"/>

    </igDP:XamDataCarousel.FieldSettings>

     
    This will remove the padding from the CallValuePresenter.
     
    Joe Modica
  • 8576
    Offline posted
    Hi -
     
    Hmmm ... looks like we have a Margin of 5,0,0,0 on the default template for the CellValuePresenter.  Not sure why this is there.  The way to get around this is to add the following resource somewhere in your app:
     

    <Style x:Key="cvpStyle" TargetType="{x:Type igDP:CellValuePresenter}">

    <Setter Property="Padding" Value="0,0,0,0"/>

    </Style>

     
    Then tell the XamDataCarousel to use this CellValuePresenter style by adding the following XAML inside the XAML definition for your XamDataCarousel:
     

    <igDP:XamDataCarousel.FieldSettings>

    <igDP:FieldSettings CellValuePresenterStyle="{StaticResource cvpStyle}"/>

    </igDP:XamDataCarousel.FieldSettings>

     
    This will remove the padding from the CallValuePresenter.
     
    Joe Modica
     
     
    "dsvaughan" wrote in message news:17449@forums.infragistics.com...

    I'm using an XamDataCarousel.. I'll put a sample part of the code at the bottom.

    The issue is when I output the grid each CarouselItem which is off center by about 5 pixels from the actual item (You can see the outline of the item). It is subtle when displayed, but it becomes very obvious when I make a selection and is outlined.

     I end up with an image that looks like it has some margin or padding.. I've tried adjusting Margin, Size, Padding etc.. in the canvas, the rectangle and the carouselitem without success.

     

    off center

     

     

    <igDP:XamDataCarousel Opacity=".95" Background="Beige" Grid.Column="1" Grid.Row="1" MouseDown="XamDataCarousel1_MouseDown" SelectedItemsChanged="XamDataCarousel1_SelectedItemsChanged" Height="Auto" Width="Auto" MouseDoubleClick="XamDataCarousel1_MouseDoubleClick" x:Uid="igDP:XamDataCarousel_1" x:Name="XamDataCarousel1" Margin="0,0,0,0" Theme="Office2k7Silver" GroupByAreaLocation="None">
    <igDP:XamDataCarousel.ViewSettings>
    <igWindows:CarouselViewSettings x:Uid="igWindows:CarouselViewSettings_1" IsListContinuous="True" ItemPath="{Binding ElementName=circlePath, Mode=OneWay}" ItemsPerPage="10" OpacityEffectStopDirection="UseItemPath" ScalingEffectStopDirection="UseItemPath" UseOpacity="True" ItemPathPadding="0,0,0,152" ItemPathPrefixPercent="0" ItemPathSuffixPercent="0.15" ItemHorizontalScrollBarVisibility="Hidden" ItemVerticalScrollBarVisibility="Hidden" ItemSize="120,120" >
    <igWindows:CarouselViewSettings.ItemPathRenderPen>
    <Pen x:Uid="Pen_1" Brush="#FF000000" Thickness="0"/>
    </igWindows:CarouselViewSettings.ItemPathRenderPen>
    </igWindows:CarouselViewSettings>
    </igDP:XamDataCarousel.ViewSettings>

     

    <Canvas Width="120" Height="120" Background="Beige">
    <Rectangle Width="120" Height="120" RadiusX="20" RadiusY="20">
    <Rectangle.Fill>
    <ImageBrush ImageSource="images\australia.jpg"/>
    </Rectangle.Fill>
    </Rectangle>
    </Canvas>

     

     

     

    <Canvas HorizontalAlignment="Left" Margin="0" Width="120" Height="120" Background="Red">
    <Rectangle Stroke="Blue" StrokeThickness="2" Width="120" Height="120" RadiusX="20" RadiusY="20">
    <Rectangle.Fill>
    <ImageBrush ImageSource="images\southamerica.jpg"/>
    </Rectangle.Fill>
    </Rectangle>
    </Canvas>

     

     

     


    http://forums.infragistics.com/forums/p/3150/17449.aspx#17449