在WPF下整一個會分頁的DataGrid（一）

根據項目須要，要把會分頁的DataGrid整合成一個控件，讓別人用起來也不會太麻煩（我認可，關於自定義控件我是小白）。頁面上主要分爲三部分：檢索、展現、頁碼欄（左邊的就是示例樣式嘍）。

說到頁面，離不開的就是樣式和佈局。

這個控件用到了兩個Style，都是按鈕的樣式。。還有一些個別的或者沒有一致性的就單獨放在了控件裏面。

樣式一：「上頁」和「下頁」的樣式

<Style x:Key="PageButton" TargetType="{x:Type Button}">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid>
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

樣式二：「跳轉」按鈕（跳轉按鈕其實也不須要放出來啦。。可是我懶的弄到控件裏面了就這樣吧。。）

            <Style x:Key="GoButton" TargetType="{x:Type Button}">
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
            </Style>

接下來是頁面佈局，明顯就是分爲三個部分嗎：最上面的檢索，中間的數據展現，最下面的頁碼控制。

    <Grid x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded_1"
          Width="300">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel Margin="0 3" Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <TextBlock Text="軸號" VerticalAlignment="Center" FontSize="14"/>
            <TextBox x:Name="tbZh" HorizontalAlignment="Stretch"
                     Width="120" FontSize="14" VerticalAlignment="Center"
                     Margin="3 0 0 0"/>
            <Button x:Name="btnSearch" Content="檢索" Margin="10 0 0 0"
                    Click="btnSearch_Click_1"/>
            <Button x:Name="btnCheckAll" Content="查看所有"
                    Margin="10 0 0 0" Click="btnCheckAll_Click_1"/>
        </StackPanel>
        <DataGrid x:Name="dg" IsReadOnly="True" CanUserAddRows="False"
                  AutoGenerateColumns="False" Grid.Row="1"
                  AlternatingRowBackground="LightBlue">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Bind_DH}" Width="140"
                                    Header="單號"/>
                <DataGridTextColumn Binding="{Binding Bind_BH}" Width="140"
                                    Header="軸號"/>
            </DataGrid.Columns>
        </DataGrid>
        <Grid Grid.Row="2">
            <Grid.Background>
                <LinearGradientBrush StartPoint="0.5 0"
                                     EndPoint="0.5 1">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="LightGray" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="第" VerticalAlignment="Center"/>
            <TextBlock x:Name="tbIndex" VerticalAlignment="Center"
                       Text="{Binding CurrentPage}" Grid.Column="1"/>
            <TextBlock Text="頁" VerticalAlignment="Center" Grid.Column="2"/>
            <TextBlock Text="共" VerticalAlignment="Center" Margin="5 0 0 0"
                       Grid.Column="3"/>
            <TextBlock x:Name="tbTotal" VerticalAlignment="Center"
                       Text="{Binding TotalPages}" Grid.Column="4"/>
            <TextBlock Text="頁" VerticalAlignment="Center" Grid.Column="5" />
            <Button x:Name="btnPrev" Content="上頁" Margin="2 0 0 0"
                    Style="{StaticResource PageButton}" Grid.Column="7"
                    Click="btnPrev_Click_1" IsEnabled="False"/>
            <ListBox x:Name="lbPageNumbers" Margin="3 0" Visibility="Collapsed"
                     Grid.Column="8" MaxWidth="100" BorderBrush="Transparent"
                     BorderThickness="0" Background="Transparent"
                     VerticalAlignment="Center" SelectionChanged="lbPageNumbers_SelectionChanged_1"
                     ScrollViewer.CanContentScroll="False"
                     ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                     ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal" IsItemsHost="True"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
            <Button x:Name="btnNext" Content="下頁" IsEnabled="False"
                    Style="{StaticResource PageButton}" Margin="10 0 0 0"
                    Click="btnNext_Click_1" Grid.Column="9"/>
            <TextBox x:Name="tbGoNum" Width="30" Margin="5 0" Grid.Column="10"
                     VerticalAlignment="Center" TextChanged="tbGoNum_TextChanged_1"/>
            <Button x:Name="btnGo" Content="跳轉" IsEnabled="False"
                    Style="{StaticResource GoButton}"
                    Click="btnGo_Click_1" Grid.Column="11"/>
        </Grid>
    </Grid>

檢索和數據展現都沒什麼好說的了，煩人的是頁碼展現這裏。網上大神們用的方法不少，這裏我用的ListBox，數字也是最普通的樣子，若是想要美化的東西，就本身設計個Style吧。

到此，頁面部分應該沒什麼可說的了，下一篇是代碼部分。嗯，就到這吧～