wpf绑定数据及动态生成控件

前言：从来没使用过wpf，但是最近的项目需要使用到这个，自己通过百度搜索，咨询，整理最终完成了功能。所有的东西都比较零散，在此做一个总结，希望帮到需要的人。

 

一.wpf之Datagrid

    先上效果图

    

1.datagrid动态绑定数据

  xmal代码：

<DataGrid x:Name="dataGrid" Margin="0,52,0,65" AutoGenerateColumns="False" LoadingRow="dataGrid_LoadingRow" HeadersVisibility="Column" CanUserAddRows="False" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="White" Foreground="Black" BorderBrush="#FFECECEC" CanUserDeleteRows="False" MouseDoubleClick="dataGrid_MouseDoubleClick">
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="状态" Width="100" CanUserSort="True" >
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                <Label>
                                    <Binding Path="state"></Binding>
                                </Label>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>

Cs代码

  List<FamilyValue> fuls = new List<FamilyValue>();
fv.state="111
fuls.add("fv);
dataGrid.ItemsSource = null;
  dataGrid.ItemsSource = fuls;

 关键点：其中最关键的是给整个datagrid的itemsource赋值，赋值内容为一个数组。其中我用的是自己写的类，类中不同的字段就可以绑定datagrid中不同列。列绑定数据方法为 <Binding Path="state"></Binding>

2.datagrid列中添加并显示图片

   xaml代码  

   <DataGridTemplateColumn Header="预览图片" Width="0.185*" CanUserSort="True"  >
                    <DataGridTemplateColumn.CellTemplate >
                        <DataTemplate >

                            <!--// <Image Source="{Binding img}"  moused />-->
                            <Image Source="{Binding img}">
                            </Image>

                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>

                </DataGridTemplateColumn>

cs代码

   var iii = Image.FromFile(a);
                        Bitmap map = new Bitmap(iii);
                        BitmapImage bitmap = BitmapToBitmapImage(map);
                        FamilyValue fv = new FamilyValue();
                        fv.img = bitmap;




  /// <summary>
        /// 文件流转换成图片
        /// </summary>
        /// <param name="bitmap"></param>
        /// <returns></returns>
        public BitmapImage BitmapToBitmapImage(Bitmap bitmap)
        {
            Bitmap bitmapSource = new Bitmap(bitmap.Width, bitmap.Height);
            int i, j;
            for (i = 0; i < bitmap.Width; i++)
                for (j = 0; j < bitmap.Height; j++)
                {
                    System.Drawing.Color pixelColor = bitmap.GetPixel(i, j);
                    System.Drawing.Color newColor = System.Drawing.Color.FromArgb(pixelColor.R, pixelColor.G, pixelColor.B);
                    bitmapSource.SetPixel(i, j, newColor);
                }
            MemoryStream ms = new MemoryStream();
            bitmapSource.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.BeginInit();
            bitmapImage.StreamSource = new MemoryStream(ms.ToArray());
            bitmapImage.EndInit();
            return bitmapImage;
        }

关键点：我在datagrid的图片列用imageb件n直接绑定后台的数据，后台需要将本地文件中的某个图片转换为bitmapimage类型。可以直接赋值给image就可以了（数据绑定参照1.）

3.列头内容居中，行内容水平居中

  列头居中

  <DataGrid> 
 <DataGrid.ColumnHeaderStyle>
                <Style TargetType="DataGridColumnHeader">
                    <Setter Property="HorizontalContentAlignment" Value="Center">
                    </Setter>
                </Style>
            </DataGrid.ColumnHeaderStyle>
  </DataGrid        

内容居中

<DataGrid>
 <DataGridTemplateColumn Header="族名称" Width="0.18*" CanUserSort="True"  >
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                <TextBox BorderBrush="White" >
                                    <Binding Path="name"></Binding>
                                </TextBox>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

</DataGrid>

4.鼠标右键弹出菜单

xaml代码

<DataGrid>
<DataGrid.ContextMenu>
                <ContextMenu Name="cmList" StaysOpen="true" Background="AliceBlue">
                    <ContextMenu.BitmapEffect>
                        <OuterGlowBitmapEffect />
                    </ContextMenu.BitmapEffect>
                    <Separator/>

                    <MenuItem Header="设置分类" Name="settype" Click="settype_Click" >
                    </MenuItem>


                    <MenuItem Header="删除" Name="cmuDelete" Click="cmuDelete_Click">
                    </MenuItem>
                </ContextMenu>
            </DataGrid.ContextMenu>
</DataGrid>

5.wpf动态添加选项卡

  

 

xaml代码

 <TabControl x:Name="tabControl" HorizontalAlignment="Left" Margin="-2,21,-4,0" Width="970" FontSize="13" ItemsSource="{Binding fvs}"  SelectionChanged="tabControl_SelectionChanged" SelectedIndex="-1" BorderBrush="#FF9B9B9B" Height="25" VerticalAlignment="Top">
            <TabControl.ItemTemplate >
                <DataTemplate>
                    <TextBlock Text = "{Binding type}" Height="22" Width="42" HorizontalAlignment="Center"  VerticalAlignment="Center" />
                </DataTemplate>
            </TabControl.ItemTemplate>

        </TabControl>

cs代码

  private void Window_Loaded(object sender, RoutedEventArgs e)
        {
       
            List<FamilyValue> fvs = new List<FamilyValue>();
            foreach (var item in Types)
            {
                string newname = "";
                if (item.Length == 2)
                {
                    for (int i = 0; i < item.Length; i++)
                    {
                        if (i == 1)
                        {
                            newname += "   ";
                        }
                        newname += item[i];
                    }
                }
                else
                {
                    newname = item;
                }

                FamilyValue fv = new FamilyValue();
                fv.type = newname; 
                fvs.Add(fv);
            }  
             tabControl.ItemsSource = fvs;
        }

注意点：依旧是数据绑定

6.wpf中动态添加数据（图片和文字）

xaml代码

      <Border BorderBrush="#FFB2B2B2" Background="White"  Margin="0,46,0,70" BorderThickness="1" >
            <Grid HorizontalAlignment="Left" Height="565" Margin="0,-1,-2,0" VerticalAlignment="Top" Width="964"  x:Name="contentGrid">
                <ListBox  x:Name="listbox" ItemsSource="{Binding fvs}"  MouseDoubleClick="listbox_MouseDoubleClick" Margin="-1,0,10,0" VerticalAlignment="Top" >
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="10" Width="126" Height="135" >
                                <Grid.Effect>
                                    <DropShadowEffect ShadowDepth="-4" BlurRadius="5" Color="LightGray"/>
                                </Grid.Effect>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                </Grid.RowDefinitions>

                                <Image Source="{Binding img}" HorizontalAlignment="Center" VerticalAlignment="Top" Width="107" Height="107"  ></Image>
                                <TextBlock Text="{Binding name}" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Center" Height="28"></TextBlock>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <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>
        </Border>

cs代码

      List<FamilyValue> fvs_new = new List<FamilyValue>();
          
         FamilyValue fv=new familyvalue;                       
                        fv.name = name;
                        fvs_new.Add(fv);              

            listbox.ItemsSource = fvs_new;

主要点：

  ①.图片和文字在一块需要用一个grid。

  ②.需要用到的控件为listbox，需要设置Listbox.template为xaml代码中的样式，直接对所有数据进行排列，如果超过grid的宽会自动换行。其中xaml中的方法为动态获取数据并添加显示。

 

总结：详细设置和绑定的方法都在xaml代码中写清楚了，如果有更好的方法或者更简单的方法欢迎留言讨论。谢谢大家了。