search

MahApps / MahApps.Metro

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.
https://mahapps.com
MIT License
9.3k stars 2.45k forks source link

Badge in TabItem Header Getting Cropped #2994

Open Blinxar opened 7 years ago

Blinxar commented 7 years ago

What steps will reproduce this issue?

I have headers set up like this:

<TabItem.Header>
    <metro:Badged Badge="2">
        <TextBlock Text="Not cropped header"
                               Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type metro:ContentControlEx}}, Path=(TextElement.Foreground)}"
                               FontSize="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type metro:ContentControlEx}}, Path=(TextElement.FontSize)}"
                               />
    </metro:Badged>
</TabItem.Header>

Issue 1: If the header row of the TabControl isn't at least 40px then it seems like the badge will always be cropped (This means I have to set at least one TabItem to MinHeight="40").

Issue 2: The Badge is also cropping for seemingly random bits of text in the badged TextBlock. E.g.

tab1notcropped

tab11cropped

tab111notcropped

I can't see any pattern to the text that does/doesn't cause cropping.

The cropping also happens for any value of BadgePlacementMode

Repo

https://github.com/Blinxar/MetroBadgeTabItemHeader

Environment

mongeon commented 6 years ago

Did anyone find a solution for this? I'm facing the same issue as @Blinxar

lucahost commented 6 years ago

did anyone found a workaround for this issue?

murnesty commented 6 years ago

Set the Margin on the badge will fix it

`

`
Dealman commented 3 years ago

This still happens (v2.4.3) and it's not unique to the TabItem header, setting margin does not fix it. For example, here's me using it on a few buttons; image

Once the badge has more than 2 characters, it behaves exactly as if ClipToBounds is set to true. Been fiddling with margins and whatnot, but haven't been able to find a solution so for now I just prevent it from ever reaching 3 or more characters.

It looks as expected in the Designer, however; image

Edit:

After posting this I realized it's not actually a character limit, actually not quite sure what's going on here 😕

timunie commented 3 years ago

@Dealman please provide a sample App which will show your issue. We can have a look then.

Dealman commented 3 years ago

@Dealman please provide a sample App which will show your issue. We can have a look then.

Sorry for the late response, my project is a bit immature and experimental at the moment but I've uploaded it to GitHub. The badges in question that are being clipped are those:

https://github.com/Dealman/Valheim-Server-Manager/blob/e4e6ebc851e8ea130d3c9900111a06df7cf413b2/Valheim%20Server%20Manager/MainWindow.xaml#L83-L92

Excuse me if this is a bit of a bloated and messy sample app, I'm not quite sure how reproducible it would be otherwise. As the other badges are working as intended, but these are being clipped for some reason.

I tried making sure ClipToBounds was being forced false and setting Clip to x:Null in case that'd have any effect, but it did not.

Edit:

I stumbled upon this just before posting this and just gave it a try, I made a new class and made it inherit from the Badged class. Implementing the override as shown in that answer does stop the clipping.

image

I'm a complete noob when it comes to the inner workings, do's and don'ts of WPF so whether this is a good or bad solution or may help narrow down what's going on - I have no idea, but figured I'd mention it 🤷‍♂️

timunie commented 3 years ago

Hi @Dealman

I think you should do some tutorials on WPF especially about Layout options. If I change your Layout to be a StackPanel and adjust all the Margins I get this:

image

It does not look nice, but no Badge is clipped anymore. 

<TabItem Header="Main">
    <StackPanel x:Name="MainGrid"
                Margin="20"
                HorizontalAlignment="Stretch"
                Orientation="Horizontal">
        <mah:Badged x:Name="WorldGenBadge"
                    Margin="20"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    BadgePlacementMode="TopRight">
            <Button x:Name="WorldGenConsoleButton" Content="WorldGen"
                    Margin="0"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    mah:ControlsHelper.ContentCharacterCasing="Normal"
                    BorderThickness="0"
                    Click="Button_Click"
                    Focusable="False" />
        </mah:Badged>
        <mah:Badged x:Name="DebugBadge"
                    Margin="20"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    BadgePlacementMode="TopRight">
            <Button x:Name="DebugConsoleButton" Content="Debug"
                    Margin="0"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    mah:ControlsHelper.ContentCharacterCasing="Normal"
                    BorderThickness="0"
                    Click="Button_Click"
                    Focusable="False" />
        </mah:Badged>

        <mah:Badged x:Name="NormalBadge"
                    Margin="20"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    BadgePlacementMode="TopRight">
            <Button x:Name="NormalConsoleButton" Content="Normal"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    mah:ControlsHelper.ContentCharacterCasing="Normal"
                    BorderThickness="0"
                    Click="Button_Click"
                    Focusable="False"
                    Foreground="{DynamicResource MahApps.Brushes.Accent}" />
        </mah:Badged>
        <mah:Badged x:Name="NetworkBadge"
                    Margin="20"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    BadgePlacementMode="TopRight">
            <Button x:Name="NetworkConsoleButton" Content="Network"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    mah:ControlsHelper.ContentCharacterCasing="Normal"
                    BorderThickness="0"
                    Click="Button_Click"
                    Focusable="False" />
        </mah:Badged>
        <mah:Badged Margin="20"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Badge="0"
                    BadgePlacementMode="TopRight">
            <Button Content="Banned"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    mah:ControlsHelper.ContentCharacterCasing="Normal"
                    BorderThickness="0"
                    Click="Button_Click"
                    Focusable="False" />
        </mah:Badged>
        <mah:Badged Margin="20"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Badge="0"
                    BadgePlacementMode="TopRight">
            <Button Content="Permitted"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    mah:ControlsHelper.ContentCharacterCasing="Normal"
                    BorderThickness="0"
                    Click="Button_Click"
                    Focusable="False" />
        </mah:Badged>
        <mah:Badged Margin="20"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Badge="0"
                    BadgePlacementMode="TopRight"
                    ClipToBounds="False">
            <Button Content="Admins"
                    Margin="0"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    mah:ControlsHelper.ContentCharacterCasing="Normal"
                    BorderThickness="0"
                    Click="Button_Click"
                    Focusable="False" />
        </mah:Badged>
        <mah:Badged Margin="20"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Badge="0"
                    BadgePlacementMode="TopRight">
            <Button Content="Player List"
                    Margin="0"
                    Padding="5"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    mah:ControlsHelper.ContentCharacterCasing="Normal"
                    BorderThickness="0"
                    Click="Button_Click"
                    Focusable="False" />
        </mah:Badged>
    </StackPanel>
</TabItem>

Happy coding Tim

Dealman commented 3 years ago

Ya, layout related stuff is an ongoing learning process for me. I'm still somewhat new to WPF and have never really worked with it professionally, am self-taught and a hobbyist 😄

Is this an issue solely related to layout, though? Since it was "perfectly" fixed for me via the aforementioned solution. Again, I don't know the inner workings of WPF so I couldn't tell if that's a good temporary solution or of it will break some stuff further down the line.

timunie commented 3 years ago

Hi @Dealman

I am self-taught and a hobbyist 😄

me too.

Is this an issue solely related to layout, though? Since it was "perfectly" fixed for me via the aforementioned solution.

There are always several ways to go. From what I can say I would really consider a different way to layout the App. This will also help when it comes to translations or window resizing.

Happy coding Tim

Dealman commented 3 years ago

There are always several ways to go. From what I can say I would really consider a different way to layout the App. This will also help when it comes to translations or window resizing.

That's fair, I know I'm not making proper use of the layout controls yet. I find this method of positioning stuff a bit easier to prototype with, and resizing works just fine 😄

But I think that's besides the point, I think the main point here is to try and figure out why they clip like that. I somehow doubt it's related to the layout, since the two buttons to the right were working just fine.

Again, I wanna stress that I have no idea how this all works under the hood and I think it'd be up to @punker76 to decide whether this should be considered a bug - or by design, as I have no idea.

But if it is indeed due to poor layout, the solution I posted above seems to work nicely if you still wanna keep aforementioned poor layout 😉

Edit:

For what it's worth I've now started updating my layout to instead try and make proper use of layout controls such as the DockPanel. Once I've made some more improvements to the layout I'll see if this issue still occurs or not. 👍