Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Metro popover support #1603

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from
Open

Metro popover support #1603

wants to merge 11 commits into from

Conversation

charlesw
Copy link

Support for declaring a popover inspired by Github's and Twitter Bootstrap's popover functionality. Works great with Toggle buttons as per example (checkout other tab in app)!

Note: If used inside a tab panel, as used in demo, the tab panel that hosts the target control must have an AdornerDecorator on it otherwise the popover will not work correctly due to a bug\limitation in WPF's implementation (see: http://karlshifflett.wordpress.com/2008/02/19/wpf-validation-errors-disappear-inside-tabcontrol-when-switching-tabitems/).

@ricardopolo
Copy link

Great!!

Previously the owning window's PreviewMouseDown event, used to auto close the popover, was being subscribed to
on the popover's load event and unsubscribed on unload however this didn't take into account that the Load could be called multiple
times. The popover now keeps track of if it's subscribe to the given event using a disposable handler, which is also used
to unsubscribe.
@punker76
Copy link
Member

@charlesw nice work! but i've found some issues with the current code...

  1. blurry text

2014-10-24_10h14_06

here is my solution to avoid this blurry stuff

<Grid Name="MainGrid" Background="#00FFFFFF" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="{TemplateBinding MaxWidth}" MinWidth="{TemplateBinding MinWidth}">
    <Grid>
        <Grid.Effect>
            <DropShadowEffect Direction="315" ShadowDepth="1" BlurRadius="4" Opacity="0.6" />
        </Grid.Effect>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Image Grid.Row="0" Name="arrowIcon" Width="20" Height="10" RenderTransformOrigin="0.5,0.5">
            <Image.Source>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <GeometryDrawing x:Name="arrowDrawing" Brush="#FFFFFFFF" Geometry="M0,0 L1,0 0.5,-0.5z" />
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>
        </Image>
        <Grid Grid.Row="1" Background="#FFFFFFFF" Margin="0,-1,0,0" />
    </Grid>
    <ContentPresenter x:Name="PART_ContentPresenter"
                        Margin="6 13 6 3"
                        Content="{TemplateBinding Content}"
                        DataContext="{TemplateBinding DataContext}" />
</Grid>

2014-10-24_10h15_35

  1. it doesn' work with the dark theme!

2014-10-24_10h15_44

  1. the background and forground brushes are hardcoded.

* Background and Foreground colors are now dynamically applied using the WhiteBrush and BlackBrush respectively.
* MetroPopover doesn't partake in layout (Visibility is always Collapsed).
* Popover adorner is only attached when open.
@charlesw
Copy link
Author

Thanks for the blurry fix, works a treat.

I've updated the template to use the dynamic resources, rather than hard coded values, just like MetroWindow does however the background isn't being updated when the theme is switched on the fly. That is it just seems to use the values as they were when it was first displayed. Any ideas?

Also I was thinking about whether or not the popup window (MetroPopupWindow) should respect the properties in MetroPopup. For instance if Width or MaxWidth is set if it should use these values. Note that you can currently set these values on the content item and they are respected. Any preferences here?

Turned out that the popover needed a logical tree like this:

MetroPopover -> MetroPopoverWindow -> Popover content

This is presumably because WPF uses the logical tree, rather than visual tree
when refreshing Dynamic Resources.
@charlesw
Copy link
Author

OK I think that's the last of the outstanding issues, let me know if there needs to be any additional changes.

Previously clicking a dropdown item would cause the containing popover
to close if it's AutoClose is set to True (default). This occured because the
combobox uses a popup to display the dropdown which is outside the
popovers visual tree which meant the popover thought that the user had
clicked elsewhere in the window. This is fixed by using DependancyObject.GetParentObject()
which falls back to the logical tree when required.
@agc93
Copy link

agc93 commented Jul 29, 2015

Is this still planned for inclusion? Looks like an awesome alternative to boring old labels!

@mikefayer
Copy link

I've put this through it's paces and it works great, I think it should absolutely be included in MA proper.

@punker76 punker76 changed the base branch from master to develop October 9, 2016 17:06
@amkuchta
Copy link
Contributor

amkuchta commented Mar 7, 2017

Has this got any traction? I love the thought of it and could definitely use it - is it still being worked @tempywritescode @punker76 @charlesw ?!

@punker76 punker76 self-assigned this May 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging this pull request may close these issues.

6 participants