XAML element label's content alignment on Grid Canvas

Question

I try to modify a unique XAML UI element (not made by me) so its label's content is centered to the middle of the element (Content="{Binding Counter}") So far I tried with Margins and Vertical and even Horizontal alignments without a better idea (adding and modifying existing ones)

Any ideas?

Code and picture below:

<Grid Margin="10,10,0,0" 
              Visibility="{Binding Path=DataContext.Visibility, RelativeSource={RelativeSource TemplatedParent}}" 
              IsEnabled="{Binding Path=DataContext.Enabled, RelativeSource={RelativeSource TemplatedParent}}">
            <Grid Height="{Binding Path=ActualHeight, ElementName=lbl}" Width="{Binding Path=ActualHeight, ElementName=lbl}"
                                      Margin="-195,-95,0,0" Panel.ZIndex="300" ClipToBounds="False" Visibility="{Binding CounterVisibility}">
                <Canvas>
                    <Ellipse Fill="{DynamicResource AlarmNotificationHomeView}" Stroke="{DynamicResource AlarmNotificationStrokeHomeView}" 
                             StrokeThickness="3" Width="50" Height="50" Canvas.Left="0" Canvas.Top="0" Canvas.Right="50" Canvas.Bottom="50" Name="Ellipse" />
                    <Label Name="lbl" Padding="11,13,10,10" HorizontalAlignment="Center" VerticalAlignment="Center"
                           Content="{Binding Counter}" FontWeight="Bold" FontSize="16" Foreground="{DynamicResource AlarmNotificationForegroundHomeView}"/>
                    <Canvas.Triggers>
                        <EventTrigger RoutedEvent="Canvas.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Ellipse" 
                                     Storyboard.TargetProperty="Width"
                                     From="50" To="65" Duration="0:0:0.8"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />

                                    <DoubleAnimation Storyboard.TargetName="Ellipse"
                                     Storyboard.TargetProperty="Height"
                                     From="50" To="65" Duration="0:0:0.8"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />

                                    <DoubleAnimation Storyboard.TargetName="Ellipse"
                                     Storyboard.TargetProperty="(Canvas.Left)"
                                     From="0" To="-5" Duration="0:0:0.8"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />

                                    <DoubleAnimation Storyboard.TargetName="Ellipse"
                                     Storyboard.TargetProperty="(Canvas.Top)"
                                     From="0" To="-5" Duration="0:0:0.8"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="lbl" 
                                     Storyboard.TargetProperty="FontSize"
                                     From="16" To="20" Duration="0:0:0.8"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>

                        </EventTrigger>
                    </Canvas.Triggers>
                </Canvas>
            </Grid>

Answer 1

Instead of animating Canvas.Left/Canvas.Top and Width/Height: how about using a RenderTransform and a Grid

        <Grid Margin="10" Visibility="{Binding Path=DataContext.Visibility, RelativeSource={RelativeSource TemplatedParent}}" 
          IsEnabled="{Binding Path=DataContext.Enabled, RelativeSource={RelativeSource TemplatedParent}}">
            <Ellipse Fill="{DynamicResource AlarmNotificationHomeView}" Stroke="{DynamicResource AlarmNotificationStrokeHomeView}" StrokeThickness="3" Width="50" Height="50" Name="Ellipse" RenderTransformOrigin="0.5,0.5">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform CenterX="0.5" CenterY="0.5" />
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Label Name="lbl" HorizontalAlignment="Center" VerticalAlignment="Center"
                       Content="{Binding Counter}" FontWeight="Bold" FontSize="16" Foreground="White" RenderTransformOrigin="0.5,0.5" Foreground="{DynamicResource AlarmNotificationForegroundHomeView}">
                <Label.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform CenterX="0.5" CenterY="0.5" />
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Label.RenderTransform>
            </Label>
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Grid.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever"  AutoReverse="True">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Ellipse">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <ExponentialEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.3">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <ExponentialEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Ellipse">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <ExponentialEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.3">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <ExponentialEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever"  AutoReverse="True">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="lbl">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <ExponentialEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.3">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <ExponentialEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="lbl">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <ExponentialEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.3">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <ExponentialEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>

                    </EventTrigger.Actions>
                </EventTrigger>
            </Grid.Triggers>
        </Grid>