Change the ColumnDefinitions at Codebehind

Question

Hi,

I have below XAML.

<Grid ColumnDefinitions="*,Auto" ColumnSpacing="0" RowSpacing="0" VerticalOptions="FillAndExpand">
    <HorizontalStackLayout x:Name="StackLayoutMonitoring" Grid.Column="0">
        <skia:SKLottieView HorizontalOptions="FillAndExpand" Source="monitoring.json" Margin="10" WidthRequest="50" HeightRequest="50" RepeatCount="-1" RepeatMode="Restart" VerticalOptions="Center" />

        <Label x:Name="LabelMonitoring" Text="Monitoring.." FontSize="25" Margin="20" VerticalOptions="Center">
        <Label.GestureRecognizers>
            <TapGestureRecognizer Tapped="PauseTapGestureRecognizer_Tapped" />
        </Label.GestureRecognizers>
        </Label>
    </HorizontalStackLayout>

    <Image x:Name="ImagePlayPause" Grid.Column="1" ClassId="{Binding Status}" WidthRequest="50" HeightRequest="50" Margin="20" HorizontalOptions="Center" VerticalOptions="Center">
    <Image.Source>
        <FontImageSource FontFamily="FontSolid" Color="Red" Glyph="{StaticResource IconPause}" />
    </Image.Source>
    <Image.GestureRecognizers>
        <TapGestureRecognizer Tapped="PauseTapGestureRecognizer_Tapped" />
    </Image.GestureRecognizers>
    </Image>
</Grid>

When clicking the ImagePlayPause, how can I change the Grid to ColumnDefinitions="*" instead of ColumnDefinitions="*,Auto"

Because when clicking on the Image I want the Image to be in the center of the Grid.

Thanks,

Jassim

Answer 1

Hello,

Please refer to the following code:

// in xaml
<Grid x:Name="myGrid" ColumnDefinitions="*,Auto" ...

// in code behind
private void PauseTapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
{
    myGrid.ColumnDefinitions.Clear();
    myGrid.ColumnDefinitions = new ColumnDefinitionCollection
    {
            new ColumnDefinition(),
    ;
}

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.