C#•17mo ago

❔ ✅ Notification marker in WPF

I want to create a notification marker like seen in the first picture. I am trying this right now using <Ellipse> for the circle and <TextBlock> for the count My approach is a total mess as I have to make sure with pixel perfect margins and paddings that the number is always centered within the elipse, not to mention that the number might have 1, 2, 3.... digits. It looks okayish for 1 and 2 digit numbers but for 3+ digits the number exceeds the bounds of my ellipse and it starts to look ugly (second picture). Any better ideas than using Ellipse and TextBlock or how I could deal with this issue using Ellipse and Textblock?

20 Replies

Florian VoßOP•17mo ago

<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
    <TextBlock Margin="5, 0, 0, 0" Grid.Row="0" VerticalAlignment="Top" x:Name="AcceptedMissed" Text="Accepted Missed Calls" Background="#444444" Foreground="#FFFFFF" FontSize="20" FontWeight="SemiBold" TextAlignment="Center"/>
    <Grid Margin="5, 0, 0, 0">
        <Ellipse  Margin="0, 4, 0, 0" VerticalAlignment="Top" Width="20" Height="20" StrokeThickness="1.5" Stroke="OrangeRed"></Ellipse>
        <TextBlock HorizontalAlignment="Center" Margin="0, 6, 0, 0" Foreground="OrangeRed" Text="200"></TextBlock>
    </Grid>
</StackPanel>

<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
    <TextBlock Margin="5, 0, 0, 0" Grid.Row="0" VerticalAlignment="Top" x:Name="AcceptedMissed" Text="Accepted Missed Calls" Background="#444444" Foreground="#FFFFFF" FontSize="20" FontWeight="SemiBold" TextAlignment="Center"/>
    <Grid Margin="5, 0, 0, 0">
        <Ellipse  Margin="0, 4, 0, 0" VerticalAlignment="Top" Width="20" Height="20" StrokeThickness="1.5" Stroke="OrangeRed"></Ellipse>
        <TextBlock HorizontalAlignment="Center" Margin="0, 6, 0, 0" Foreground="OrangeRed" Text="200"></TextBlock>
    </Grid>
</StackPanel>

canton7•17mo ago

ViewBox to scale the number?

Florian VoßOP•17mo ago

I don't know what that is or how to use it, could you ellaborate?

canton7•17mo ago

Google "WPF viewbox" first, and come back if you still have questions? The official docs will do a better job than I can

Florian VoßOP•17mo ago

I have and I already get confused by the very first line of the docs... why do I need a camera object or even a 3D scene at all? https://learn.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/ it seems to be 3D already what I have

Graphics and Multimedia - WPF .NET Framework

Discover media features of Windows Presentation Foundation (WPF). Add graphics, transition effects, sound, and video to your applications.

Florian VoßOP•17mo ago

is that the docs page you meant? Its what I get when searching for wpf viewport

canton7•17mo ago

Sorry, *ViewBox

Florian VoßOP•17mo ago

viewbox apparently can only contain a single child element. How can I use it to scale the number in my circle?

Florian VoßOP•17mo ago

tried putting it around the parent (grid) but that can't be right as it ruins the whole look of what I have

canton7•17mo ago

You want to scale the textbox with the numbers in, presumably? and leave the circle as the same size?

Florian VoßOP•17mo ago

yes, that would be perfect

canton7•17mo ago

So, put it around the textbox with the numbers in?

Florian VoßOP•17mo ago

looks like this

Florian VoßOP•17mo ago

when having around textbox

canton7•17mo ago

There are some properties on the ViewBox which affect scaling, which you'll need to set

Florian VoßOP•17mo ago

I've tried different values for those properties but the number never appears

Florian VoßOP•17mo ago

I found the issue, its working now. Thx I should mention what the issue was. The number was not placed correctly so I wasnt seeing it. if I recall correctly it was hidden behind the datagrid and I had to do VerticalAlignment=Top on the textbox or smth like that @canton7 pinging you, just in case you are interested when

canton7•17mo ago

Cool, thanks for the update, glad it's working!

Accord•17mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ ✅ Notification marker in WPF