XamarinでListViewを表っぽくした
2017年4月8日
WPFのDataGridみたいな感じにしたいけど、Borderとかないし。。。
細いGridを格子状にして、BoxViewを並べればできるっぽいのでそうしてみた。
ソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<ListView Grid.Row="11" Grid.ColumnSpan="2" ItemsSource="{Binding BloodList}" SelectedItem="{Binding SelectedItem}" SeparatorVisibility="None" RowHeight="20"> <ListView.Behaviors> <bhv:EventToCommandBehavior EventName="ItemSelected" Command="{Binding ItemSelectedCommand}"/> <bhv:EventToCommandBehavior EventName="ItemAppearing" Command="{Binding ItemAppearingCommand}"/> </ListView.Behaviors> <ListView.Header> <Grid BackgroundColor="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1" /> <ColumnDefinition Width="80*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="30*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="10*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="20*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="20*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="20*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="30*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="10*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="40*" /> <ColumnDefinition Width="1" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1"/> <RowDefinition Height="*"/> <RowDefinition Height="1"/> </Grid.RowDefinitions> <!--横の罫線--> <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="19" BackgroundColor="White" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/> <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="19" BackgroundColor="White" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/> <!--縦の罫線--> <BoxView Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="4" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="6" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="8" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="10" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="12" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="14" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="16" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="18" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="White" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="1" HorizontalTextAlignment="Center" Text="日付" FontSize="Small" BackgroundColor="Navy" TextColor="White"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="3" HorizontalTextAlignment="Center" Text="時間" FontSize="Small" BackgroundColor="Navy" TextColor="White"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="5" HorizontalTextAlignment="Center" Text="起床" FontSize="Small" BackgroundColor="Navy" TextColor="White"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="7" HorizontalTextAlignment="Center" Text="最高血圧" FontSize="Small" BackgroundColor="Navy" TextColor="White"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="9" HorizontalTextAlignment="Center" Text="最低血圧" FontSize="Small" BackgroundColor="Navy" TextColor="White"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="11" HorizontalTextAlignment="Center" Text="脈拍" FontSize="Small" BackgroundColor="Navy" TextColor="White"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="13" HorizontalTextAlignment="Center" Text="体重" FontSize="Small" BackgroundColor="Navy" TextColor="White"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="15" HorizontalTextAlignment="Center" Text="服薬" FontSize="Small" BackgroundColor="Navy" TextColor="White"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="17" HorizontalTextAlignment="Center" Text="メモ" FontSize="Small" BackgroundColor="Navy" TextColor="White"/> </Grid> </ListView.Header> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="1" /> <ColumnDefinition Width="80*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="30*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="10*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="20*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="20*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="20*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="30*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="10*" /> <ColumnDefinition Width="1" /> <ColumnDefinition Width="40*" /> <ColumnDefinition Width="1" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1"/> <RowDefinition Height="*"/> <RowDefinition Height="1"/> </Grid.RowDefinitions> <!--横の罫線--> <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="19" BackgroundColor="Black" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/> <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="19" BackgroundColor="Black" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/> <!--縦の罫線--> <BoxView Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="4" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="6" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="8" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="10" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="12" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="14" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="16" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <BoxView Grid.Column="18" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="1" HorizontalTextAlignment="Center" Text="{Binding Date, Converter={StaticResource DateTimeToStringConv}, Mode=OneWay}" FontSize="Small"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="3" HorizontalTextAlignment="Center" Text="{Binding Time, Converter={StaticResource TimeSpanToStringConv}, Mode=OneWay}" FontSize="Small"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="5" HorizontalTextAlignment="Center" Text="{Binding Wakeup, Converter={StaticResource BoolToMarkConv}, Mode=OneWay}" FontSize="Small"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="7" HorizontalTextAlignment="Center" Text="{Binding Max, Mode=OneWay}" FontSize="Small"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="9" HorizontalTextAlignment="Center" Text="{Binding Min, Mode=OneWay}" FontSize="Small"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="11" HorizontalTextAlignment="Center" Text="{Binding Pulse, Mode=OneWay}" FontSize="Small"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="13" HorizontalTextAlignment="Center" Text="{Binding Weight, Mode=OneWay}" FontSize="Small"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="15" HorizontalTextAlignment="Center" Text="{Binding Check, Converter={StaticResource BoolToMarkConv}, Mode=OneWay}" FontSize="Small"/> <Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="-6,-6,-6,-6" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="17" HorizontalTextAlignment="Center" Text="{Binding Memo, Mode=OneWay}" FontSize="Small"/> </Grid> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> |
変更前こうだったが、、
こうなった。(o^-‘)b グッ!
アンドロイドにも入れてみた。
結構違うんだなぁ。