技能点包括 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();



       }



    }

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