Have an items overflow in a Listbox

Question

There's an overflow in the listbow If someone have an idea of what I making wrong in this part of the code I check for this problem but not good answer

The ListView doesn't work too, I will try with an ItemControl, but it's not so easy to get the selected item

Maybe with a Zindex ? But doesn't work too

 <UserControl x:Class="XX.ThumbnailView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Thumbnail="clr-namespace:XX.Thumbnail"
    xmlns:controls="clr-namespace:XX.Controls"
    xmlns:resources="clr-namespace:X.Resources">

   <UserControl.Resources>
      <DataTemplate x:Key="Thumb">
         <Grid Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center" >
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Thumbnail:Thumbnail Grid.Column="0" Source="{Binding}" />
         </Grid>
      </DataTemplate>

      <Style TargetType="ListBox">
         <Setter Property="ItemsPanel">
            <Setter.Value>
               <ItemsPanelTemplate>
                  <StackPanel Orientation="Horizontal"
                      VerticalAlignment="Center"
                      HorizontalAlignment="Center"/>
               </ItemsPanelTemplate>
            </Setter.Value>
         </Setter>
      </Style>

   </UserControl.Resources>

   <controls:CustomDialog HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource CustomDialogInformationStyle}" >
      <DockPanel>
         <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height="*" />
               <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>


            <ListBox Grid.Row="0" Name="ListBoxWindow" ItemsSource="{Binding}" ItemTemplate="{StaticResource Thumb}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
   ScrollViewer.VerticalScrollBarVisibility="Disabled" IsSynchronizedWithCurrentItem="True" Margin="0,0,0,20" Height="200" Width="300" >

               <ListBox.Template>
                  <!--Does anyone know a better way to turn off horizontal scrolling in a ListBox?-->
                  <ControlTemplate TargetType="ListBox" 
                                                                                 xmlns:s="clr-namespace:System;assembly=mscorlib">
                     <Border BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" Name="Bd" Background="{TemplateBinding Panel.Background}" SnapsToDevicePixels="True" Padding="1,1,1,1">
                        <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" Focusable="False" Padding="{TemplateBinding Control.Padding}">
                           <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                        </ScrollViewer>
                     </Border>
                     <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsEnabled">
                           <Setter Property="Panel.Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                           <Trigger.Value>
                              <s:Boolean>False</s:Boolean>
                           </Trigger.Value>
                        </Trigger>
                        <Trigger Property="ItemsControl.IsGrouping">
                           <Setter Property="ScrollViewer.CanContentScroll">
                              <Setter.Value>
                                 <s:Boolean>False</s:Boolean>
                              </Setter.Value>
                           </Setter>
                           <Trigger.Value>
                              <s:Boolean>True</s:Boolean>
                           </Trigger.Value>
                        </Trigger>
                     </ControlTemplate.Triggers>
                  </ControlTemplate>
               </ListBox.Template>
            </ListBox>

            <Grid Grid.Row="1" HorizontalAlignment="Right">
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <Button Grid.Column="0" Name="btnOk" Click="OkClick" Content="{resources:Translate OK}" Style="{StaticResource ButtonStyle}" />
               <Button Grid.Column="1" Name="btnCancel" Click="CancelClick" Content="{resources:Translate Annuler}" Style="{StaticResource ButtonStyle}" />
            </Grid>

            <!--<ContentControl Content="{Binding Path=/}" ContentTemplate="{StaticResource Thumb}" Width="458" Margin="0,0,0,20"/>-->
         </Grid>
      </DockPanel>
   </controls:CustomDialog>
</UserControl>

The Thumbnail style

  <DataTemplate x:Key="Thumb">
         <Grid Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center" >
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Thumbnail:Thumbnail Grid.Column="0" Source="{Binding}" />
         </Grid>
      </DataTemplate>

And here is the Thumbnail UserControl

   public partial class ThumbnailView : UserControl
    {
      #region Private Members
      private readonly ModalBehavior _modalBehavior;
      private List<Window> _activeWindows;

      private Dictionary<IntPtr, Window> _active;
      #endregion

      #region Public Properties
      public Button BtnOK
      {
         get { return this.btnOk; }
      }

      public Button BtnCancel
      {
         get { return this.btnCancel; }
      }
      #endregion

       private void OkClick(object sender, RoutedEventArgs args)
       {
         _modalBehavior.SetModalBehaviorStatusOk();

       }

      private void CancelClick(object sender, RoutedEventArgs args)
      {
         _modalBehavior.SetModalBehaviorStatusCancel();
      }


       public ThumbnailView(IEnumerable<Window> activeWindows)
       {
          InitializeComponent();
         _activeWindows = new List<Window>();
         _active = new Dictionary<IntPtr, Window>();
         _activeWindows.AddRange(activeWindows);

         _modalBehavior = new ModalBehavior(this);

          this.btnCancel.Focus();
         //stBoxWindow.SetValue(ScrollViewer.HorizontalScrollBarVisibilityProperty, ScrollBarVisibility.Disabled);
          RefreshClick();

       }

       private void RefreshClick()
        {
            var thumbs = new List<IntPtr>();
         _active.Clear();
         foreach (var window in _activeWindows)
          {
            var key = new WindowInteropHelper(window).Handle;
            thumbs.Add(key);
             if (!_active.ContainsKey(key))
             {
               _active.Add(key, window);
             }
          }

            this.DataContext = thumbs;
        }

       public Window ShowModalDialog()
       {
          var result = _modalBehavior.ShowModalDialog();
          if (result == ModalBehavior.ModalBehaviorStatus.Ok)
          {
            /*if (ListBoxWindow != null)
             {
                var selItems = ListBoxWindow.SelectedItems;
                if (selItems.Count > 0)
                {
                  var tt = (IntPtr)selItems[0];
                   if (_active.ContainsKey(tt))
                   {
                      return _active[tt];
                   }
                }
             }*/
          }
          return null;
       }
    }

Answer 1

I set the ItemsPresenter like this

<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"  ClipToBounds="True" Width="400"/>

and now the result is like this

Answer 2

On the other hand, if you want to keep the horizontal scroll but prevent your items to overflow outside your ListBox, you might want to check the ClipToBounds property:

https://msdn.microsoft.com/en-us/library/system.windows.uielement.cliptobounds(v=vs.110).aspx

Set it in your ListBox and make a TemplateBinding to it in your ItemsPresenter, and it should stop the overflow (if not, try to set in your ItemsPanelTemplate's StackPanel...).

<ListBox Grid.Row="0"
         Name="ListBoxWindow" 
         ItemsSource="{Binding}" 
         ItemTemplate="{StaticResource Thumb}" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
         ScrollViewer.VerticalScrollBarVisibility="Disabled" 
         IsSynchronizedWithCurrentItem="True" 
         Margin="0,0,0,20" 
         Height="200" 
         Width="300"
         ClipToBounds="True">
    <ListBox.Template>
              <!--Does anyone know a better way to turn off horizontal scrolling in a ListBox?-->
        <ControlTemplate TargetType="ListBox"
                         xmlns:s="clr-namespace:System;assembly=mscorlib">
            <Border BorderBrush="{TemplateBinding Border.BorderBrush}"
                     BorderThickness="{TemplateBinding Border.BorderThickness}"
                     Name="Bd"
                     Background="{TemplateBinding Panel.Background}"
                     SnapsToDevicePixels="True"
                     Padding="1,1,1,1">
                <ScrollViewer VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                              Focusable="False"
                              Padding="{TemplateBinding Control.Padding}">
                       <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
                                       ClipToBounds="{TemplateBinding ClipToBounds}" />
                    </ScrollViewer>
                 </Border>

Answer 3

The problem in your code is what you redefine control template, but doesn't use TemplateBinding for ScrollViewer.HorizontalScrollBarVisibility, so that setting property of ListBox like this doesn't works:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" ... /> 

Because you already have template, you can fix it by: 1) properly defining template binding 2) setting ScrollViewer property directly (inside your control template).

Here is mistake:

<ListBox ... >
    <ListBox.Template>
        <ControlTemplate TargetType="ListBox">
            <Border ...>
                <ScrollViewer HorizontalScrollBarVisibility="Auto" ...>

You set it to Auto. Set to Disabled or do like this

<ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}" ...>