WPf 带滚动条WrapPanel 自动换行 和控件右键菜单

Posted 2021-03-21 lonelyxmas

原文:WPf 带滚动条WrapPanel 自动换行 和控件右键菜单

技能点包括 WPf 样式的引用 数据的验证和绑定 比较适合初学者

前台：

 <Window.Resources>
        <local:PathToSource x:Key="n2"/>
        <Style x:Key="{x:Type ContextMenu}" TargetType="{x:Type ContextMenu}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContextMenu}">
                        <Border Background="#CD222120" CornerRadius="7, 7, 8, 8" BorderBrush="DarkGray" BorderThickness="2" Opacity="0.96">
                            <StackPanel ClipToBounds="True" Orientation="Vertical" IsItemsHost="True" Margin="5,4,5,4"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="{x:Type MenuItem}">
            <Border Name="Border" >
                <Grid>
                    <ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
                </Grid>
            </Border>
        </ControlTemplate>
 
        <DataTemplate x:Key="Wrapitem">
            <Grid  Height="86"   Width="86"  >
                <Grid.ContextMenu>
                    <ContextMenu Name="cm" StaysOpen="true">
                        <MenuItem Header="update"/>
                        <MenuItem Header="Save"/>
                        <MenuItem Header="SaveAs"/>
                    </ContextMenu>
 
                </Grid.ContextMenu>
                <Image Margin="8,8,8,24" Source="{Binding Path=Url,Converter={StaticResource n2}}"/>
                <Label Content="{Binding Path=Text}" Height="22" Width="45"   VerticalAlignment="Bottom"/>
    	</Grid>
            
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListBox x:Name="list" Margin="124,63,109,44"  ScrollViewer.HorizontalScrollBarVisibility="Hidden"   ItemTemplate="{StaticResource Wrapitem}">
            <ListBox.Resources>
                <Style TargetType="ListBoxItem">
 
                    <Style.Resources>
 
                        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFA1A1A1"/>
                    </Style.Resources>
                </Style>
            </ListBox.Resources>
 
         
                <!--<ListBox.ItemsPanel >
    			<ItemsPanelTemplate>
                    <WrapPanel   Orientation="Horizontal" IsItemsHost="True"/>
				</ItemsPanelTemplate>
    		
			</ListBox.ItemsPanel>-->
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                        <WrapPanel Orientation="Horizontal" IsItemsHost="True" ScrollViewer.CanContentScroll="True"/>
                    </ScrollViewer>
                </ControlTemplate>
            </ListBox.Template>
        </ListBox>
   
    
        
    </Grid>
</Window>

后台：

   /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            load();
        }
 
        public void load() 
        {
            ObservableCollection<Mean> ListMean = new ObservableCollection<Mean>() 
            {
                 new Mean(){Text="001",Url="i"},
                 new Mean(){Text="002",Url="i"},
                 new Mean(){Text="003",Url="ii"},
                 new Mean(){Text="004",Url="i"},
                 new Mean(){Text="005",Url="i"},
                 new Mean(){Text="006",Url="ii"},
                 new Mean(){Text="007",Url="i"},
                 new Mean(){Text="008",Url="i"},
                 new Mean(){Text="009",Url="i"},
                 new Mean(){Text="010",Url="i"},
                 new Mean(){Text="011",Url="ii"},
                 new Mean(){Text="012",Url="i"},
                 new Mean(){Text="013",Url="i"},
                 new Mean(){Text="014",Url="i"},
                 new Mean(){Text="015",Url="i"},
                 new Mean(){Text="016",Url="i"},  
                 new Mean(){Text="017",Url="i"}
            };
            list.ItemsSource = ListMean;
        }
    }
    public class Mean : INotifyPropertyChanged
    {
        private string text;
 
        public string Text
        {
            get { return text; }
            set { text = value; OnPropertyChanged("Text"); }
        }
        private string url;
 
        public string Url
        {
            get { return url; }
            set { url = value; OnPropertyChanged("Url"); }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        public void OnPropertyChanged(string propertyName)
        {
 
            if (PropertyChanged != null)
            {
 
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
 
            }
 
        }
    }
    public class PathToSource:IValueConverter
    {
       public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
       {
         
           string url = string.Format(@"/Images/{0}.jpg", (string)value=="i"?"i":"ii");
           return new BitmapImage(new Uri(url,UriKind.Relative));
       }
       public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
       {
           throw new NotImplementedException();
       }
    }