2

I have an issue putting an action button in my ItemRepeater. I proceeded the same way as I do in ListView :

<muxc:ItemsRepeater Margin="0,24,0,0" ItemsSource="{x:Bind ViewModel.Team.Events, Mode=OneWay}">
        <muxc:ItemsRepeater.ItemTemplate>
              <DataTemplate x:DataType="models:Event">
              <controls:Expander
                                        HorizontalContentAlignment="Left"
                                        Header="{x:Bind Name, Mode=OneWay}"
                                        ExpandDirection="Down"
                                    >
                                        <StackPanel HorizontalAlignment="Left" Padding="24">
                                            <TextBlock Text="{x:Bind Name}" FontSize="36" />
                                            <TextBlock Text="{x:Bind Description}" />
                                            <StackPanel Spacing="4" Orientation="Horizontal">
                                                <TextBlock Text="{x:Bind Start}" />
                                                <TextBlock Text="-" />
                                                <TextBlock Text="{x:Bind End}" />
                                            </StackPanel>

                                            <TextBlock Text="{x:Bind Type}" />
                                            <Grid Width="1000" Margin="0,24,0,0">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="13*" />
                                                    <ColumnDefinition Width="*" />
                                                    <ColumnDefinition Width="13*" />
                                                </Grid.ColumnDefinitions>
                                                <StackPanel Grid.Column="0">
                                                    <TextBlock FontSize="24" Text="Participations" />
                                                    <ListView ItemsSource="{x:Bind Participations}">
                                                        <ListView.ItemContainerStyle>
                                                            <Style TargetType="ListViewItem">
                                                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                                            </Style>
                                                        </ListView.ItemContainerStyle>
                                                        <ListView.ItemTemplate>
                                                            <DataTemplate x:DataType="models:Participation">
                                                                <Grid>
                                                                    <Grid.ColumnDefinitions>
                                                                        <ColumnDefinition Width="9*" />
                                                                        <ColumnDefinition Width="1*" />
                                                                    </Grid.ColumnDefinitions>
                                                                    <TextBlock Text="{x:Bind Username}" />
                                                                    <FontIcon Grid.Column="1" Glyph="{x:Bind Confirmed, Converter={StaticResource BooleanIconConverter}}"></FontIcon>

                                                                </Grid>
                                                            </DataTemplate>
                                                        </ListView.ItemTemplate>
                                                    </ListView>
                                                </StackPanel>

                                                <StackPanel Grid.Column="2">
                                                    <TextBlock FontSize="24" Text="Discrepancies" />
                                                    <Grid Margin="8">
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="1*" />
                                                            <ColumnDefinition Width="1*" />
                                                            <ColumnDefinition Width="2*" />
                                                            <ColumnDefinition Width="1*" />
                                                            <ColumnDefinition Width="1*" />
                                                        </Grid.ColumnDefinitions>
                                                        <TextBlock Text="Player" />
                                                        <TextBlock Text="Type" Grid.Column="1"/>
                                                        <TextBlock Text="Reason" Grid.Column="2"/>
                                                        <TextBlock Text="Delay" Grid.Column="3"/>
                                                    </Grid>
                                                    <ListView ItemsSource="{x:Bind Discrepancies}">
                                                        <ListView.ItemContainerStyle>
                                                            <Style TargetType="ListViewItem">
                                                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                                            </Style>
                                                        </ListView.ItemContainerStyle>
                                                        <ListView.ItemTemplate>
                                                            <DataTemplate x:DataType="models:Discrepancy">
                                                                <Grid>
                                                                    <Grid.ColumnDefinitions>
                                                                        <ColumnDefinition Width="1*" />
                                                                        <ColumnDefinition Width="1*" />
                                                                        <ColumnDefinition Width="2*" />
                                                                        <ColumnDefinition Width="1*" />
                                                                        <ColumnDefinition Width="1*" />
                                                                    </Grid.ColumnDefinitions>
                                                                    <TextBlock Text="{x:Bind Username}" />
                                                                    <TextBlock Text="{x:Bind Type}" Grid.Column="1"/>
                                                                    <TextBlock Text="{x:Bind Reason}" Grid.Column="2"/>
                                                                    <TextBlock Text="{x:Bind DelayLength}" Grid.Column="3"/>
                                                                    <Button Grid.Column="4" HorizontalAlignment="Right">
                                                                        <Button.Flyout>
                                                                            <Flyout>
                                                                                <StackPanel>
                                                                                    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" Text="Are you sure ?" Margin="0,0,0,12" />
                                                                                    <Button Click="DeleteDiscrepancy" Content="Yes" />
                                                                                </StackPanel>
                                                                            </Flyout>
                                                                        </Button.Flyout>

                                                                        <StackPanel Spacing="8" Orientation="Horizontal">
                                                                            <FontIcon Glyph="&#xE74D;" />
                                                                        </StackPanel>
                                                                    </Button>
                                                                </Grid>
                                                            </DataTemplate>
                                                        </ListView.ItemTemplate>
                                                    </ListView>
                                                </StackPanel>
                                            </Grid>
                                            <StackPanel Spacing="16" Orientation="Horizontal" FlowDirection="RightToLeft">
                                                <Button Click="HandleClickAddDiscrepancy">
                                                    <StackPanel Spacing="8" Orientation="Horizontal">
                                                        <TextBlock Text="Add Discrepancy"></TextBlock>
                                                        <FontIcon Glyph="&#xE710;"/>
                                                    </StackPanel>
                                                </Button>
                                                <Button>
                                                    <StackPanel Spacing="8" Orientation="Horizontal">
                                                        <TextBlock Text="Edit Event"></TextBlock>
                                                        <FontIcon Glyph="&#xE70F;"/>
                                                    </StackPanel>
                                                </Button>
                                                <Button>
                                                    <StackPanel Spacing="8" Orientation="Horizontal">
                                                        <TextBlock Text="Delete Event"></TextBlock>
                                                        <FontIcon Glyph="&#xE74D;"/>
                                                    </StackPanel>
                                                </Button>
                                            </StackPanel>
                                        </StackPanel>

                                    </controls:Expander>
              </DataTemplate>
         </muxc:ItemsRepeater.ItemTemplate>
</muxc:ItemsRepeater>

And in my code-behind :

        private void HandleClickAddDiscrepancy(object sender, RoutedEventArgs e) {
            var evt = (sender as Button)?.DataContext as Event;
            if(ViewModel.AddDiscrepancyCommand.CanExecute(evt)) {
                ViewModel.AddDiscrepancyCommand.Execute(evt);
            }
        }

But in this code-behind method, the DataContext of my button is null. Shouldn't it be the currend element of the list, in which section the button I clicked is ? How should I proceed to implement such feature ? Thanks in advance !

Ombrelin
  • 547
  • 1
  • 8
  • 27
  • I've tried this and the data context was set in my app. Is the button the root of the template? Can you check if the DataContext is not null before casting it? – chingucoding Sep 12 '20 at 11:53
  • No the button is not the root of the template, but when I do exactly the same thing with a ListView it works – Ombrelin Sep 12 '20 at 12:02
  • Just tried it with more complex templates, the DataContext works fine for me. Could it be that the `as` returns null for you? Can you share the complete template, it's a bit hard to tel what the issue is here with that snippet. – chingucoding Sep 12 '20 at 12:11
  • Don't think it's the `as` since when I debug to inspect the `sender` variable, its DataContext is null. Thank you for trying on your side, I'll upload the full markup – Ombrelin Sep 12 '20 at 12:20
  • Does the exact same markup work inside a ListView correctly? Can you try swapping out the expander control with something different? It seems that the datacontext does not propagate down correctly. If that is the case, you can manually bind the datacontext of your button to fix that. – chingucoding Sep 12 '20 at 17:03
  • Sorry for the response delay, The exact same markeup works inside a ListView. I also tried to remove the expander, the behaviour is the same – Ombrelin Oct 05 '20 at 18:20
  • Hello @Ombrelin , you can try to bind DataContext to `Button.Tag` in DataTemplate, such as ``, and then pass `(sender as Button)?.Tag as Event` in code-behind to get the DataContext – Richard Zhang Oct 07 '20 at 06:58

0 Answers0