These are chat archives for ButchersBoy/Dragablz

23rd
Feb 2015
Shel2
@Shel2
Feb 23 2015 18:20

@ButhersBoy I'm looking at the CustomHeader example to see if I can add middle-clicking to close the tab... I added CustomCommands.cs:```
public static class CustomCommands
{
public static readonly RoutedUICommand CloseTab = new RoutedUICommand
("Close Tab", "Close", typeof(CustomCommands), new InputGestureCollection{new MouseGesture(MouseAction.MiddleClick)});

}```

Then in the CustomHeader.xaml I modified the StackPanel to use the custom command:

```<UserControl.CommandBindings>
    <CommandBinding Command="dragablzDemo:CustomCommands.CloseTab" CanExecute="CloseTabCanExecute" Executed="CloseTabExecuted" />
</UserControl.CommandBindings>
<StackPanel Orientation="Horizontal">
    <Grid>                     
          <Grid.CommandBindings>
              <CommandBinding Command="dragablzDemo:CustomCommands.CloseTab"/>
          </Grid.CommandBindings>```

Now I can get into the two new methods whenever I middle-click the tab:
```private void CloseTabCanExecute(object sender, CanExecuteRoutedEventArgs e)
{
e.CanExecute = true;
}

    private void CloseTabExecuted(object sender, ExecutedRoutedEventArgs e)
    {
    //    var rc = TabablzControl.CloseItemCommand;
    //    if (rc.CanExecute(sender, e.OriginalSource as TabablzControl))
    //        rc.Execute(sender, e.OriginalSource as TabablzControl);
    }```

But I'm having trouble actually closing the tab because the sender is now the CustomerHeader object and I don't see a link to the TabablzControl... do you have a suggestion for how to perform the tab closing? I'm still just learning WPF, so I apologize if this is just simple XAML-related syntax... but thanks again for your help!

James Willock
@ButchersBoy
Feb 23 2015 18:50
Let me just put my kids to bed and I'll have a look!
James Willock
@ButchersBoy
Feb 23 2015 19:53
..OK, where you are going wrong is creating your own RoutedUICommand...you should re-use the existing one provided by Dragablz. So I did this in CustomHeader:

<UserControl.InputBindings>
    <MouseBinding Command="dragablz:TabablzControl.CloseItemCommand" MouseAction="MiddleClick" />        
</UserControl.InputBindings>
Shel2
@Shel2
Feb 23 2015 19:54
lol - that's much simpler!
James Willock
@ButchersBoy
Feb 23 2015 19:54
...you will still be able to intercept the pre/post close
<UserControl.InputBindings>
    <MouseBinding Command="dragablz:TabablzControl.CloseItemCommand" MouseAction="MiddleClick" />        
</UserControl.InputBindings>
...you will still be able to intercept the pre/post close
:)
dunno why that just posted twice
...yeah, you'll still be able to intercept the pre close, (see in BoundExampleModel: public ClosingTabItemCallback ClosingTabItemHandler)
how you getting on with the other questions you asked on the blog?
Shel2
@Shel2
Feb 23 2015 19:56
The prefix/suffix is good...
I was going to see if I could figure out how to get the same looking close button
James Willock
@ButchersBoy
Feb 23 2015 19:57
...yeah...what style are you using? one of the basic ones or the MahApps or Material one?
...cos I still need to style the close buttons on MahApps/MaterialDesign a bit better
Shel2
@Shel2
Feb 23 2015 19:58
MahApps
James Willock
@ButchersBoy
Feb 23 2015 19:58
cool. but yeah, the close button style will change at some point, cos it's not using the theme properly
Shel2
@Shel2
Feb 23 2015 19:59
And the last 2 questions from the blog: the "plus" button gets hidden off the right side of the window and I haven't found where the margin or constraint is yet...
And I'm not sure yet if I can block certain tabs from being dragged out... but I might do better to handle that with the prefix, if I can style them to look just like the normal tabs
For the close button - I just wanted to match the other tabs close button, so I was thinking of reusing the existing style - even if that changes
James Willock
@ButchersBoy
Feb 23 2015 20:00
yeah...i thought the not dragging would be your biggest problem...the prefix is probably the best way to go
as for the plus button pushing off the window...that's sounds like a bug...have you got a demo to reproduce? i dont think it happens with the demos i have set up
Shel2
@Shel2
Feb 23 2015 20:01
Let me just do a video screen grab... will take a few minutes
James Willock
@ButchersBoy
Feb 23 2015 20:01
sounds like the scroll bars are not kicking in correctly
Really quick screen capture - but it shows the "+" symbol moving off the right, and the left-most tab gets hidden by the prefix
James Willock
@ButchersBoy
Feb 23 2015 20:06
apparently i don't have a codec for that :)
Shel2
@Shel2
Feb 23 2015 20:07
That was CamStudio ... I can convert in a second...
James Willock
@ButchersBoy
Feb 23 2015 20:07
i should probably donwload more movies off bittorrent ;)
ahhhh
think i know the problem
Shel2
@Shel2
Feb 23 2015 20:09
did you get the codec?
James Willock
@ButchersBoy
Feb 23 2015 20:09
no
..the dragablz problem
James Willock
@ButchersBoy
Feb 23 2015 20:12
Have you set a HeaderSuffixContent?
Shel2
@Shel2
Feb 23 2015 20:12
You should be able to play .MP4? I typically use VLC Media Player
James Willock
@ButchersBoy
Feb 23 2015 20:12
yeah i can see that
there is one bit, I am not particularly proud of
bit i think it will solve your problem
Shel2
@Shel2
Feb 23 2015 20:13

        <dragablz:TabablzControl.HeaderPrefixContent>
            <DockPanel>
                <Button>HOME</Button>
                <Button>Notifications</Button>
            </DockPanel>
        </dragablz:TabablzControl.HeaderPrefixContent>
James Willock
@ButchersBoy
Feb 23 2015 20:14
(Suffix)
Try this:
Shel2
@Shel2
Feb 23 2015 20:14
(Very basic while I'm just figuring out the layout and control options!)
        <dragablz:TabablzControl.HeaderPrefixContent>
            <DockPanel>
                <Button>HOME</Button>
                <Button>Notifications</Button>
            </DockPanel>
        </dragablz:TabablzControl.HeaderPrefixContent>
(Very basic while I'm just figuring out the layout and control options!)
James Willock
@ButchersBoy
Feb 23 2015 20:14

            <dragablz:TabablzControl.HeaderSuffixContent>
                <Grid Width="75" />
            </dragablz:TabablzControl.HeaderSuffixContent>
            <dragablz:TabablzControl.HeaderSuffixContent>
                <Grid Width="75" />
            </dragablz:TabablzControl.HeaderSuffixContent>
try putting that in the suffix
not great, i know
and if that works make sure you Star Dragablz on GitHub, it's the only form of payment I accept ;)
Interesting that that DockPanel overlays the tabs in your Prefix...maybe try changing it to a <StackPanel Orientation="Horizontal">
Shel2
@Shel2
Feb 23 2015 20:18
That didn't seem to work to help either the left or right side... I tried different widths... I'll try the different controls...
James Willock
@ButchersBoy
Feb 23 2015 20:20
blob
OK, so I was able to reproduce the plus button disappearing...do I added the Grid hack, and you can see in the above scr shot that the scroll buttons have kicked in and the plus is still visible
Shel2
@Shel2
Feb 23 2015 20:21
Can you try with 3 tabs?
And is the Stylez window example in Git?
James Willock
@ButchersBoy
Feb 23 2015 20:21
blob
(Set the StylezApp as the startup project)
Shel2
@Shel2
Feb 23 2015 20:23
OK - I saw the DragablzModernUIDemo project (not added to the solution), but it doesn't run
James Willock
@ButchersBoy
Feb 23 2015 20:23
yeah, that's old and defunct, i should delete it
Shel2
@Shel2
Feb 23 2015 20:27
With the Stylez window, and 3 tabs, I can get the "Introduction" to be covered by the Prefix, and the Plus button to disappear off the right
screen.png
I think the "Introduction" gets first slid underneath the prefix when the left/right buttons get added
When there are only 2 tabs though, then the tabs don't move left when the left/right tab-navigation buttons are added. Only with 3 or more
James Willock
@ButchersBoy
Feb 23 2015 20:45
hmmm
...did you add the HeaderSuffixContent Grid 75?
that is not in the source...i added it manually playing around
Shel2
@Shel2
Feb 23 2015 20:46
        <dragablz:TabablzControl.HeaderPrefixContent>
            <Grid Width="75">
                <StackPanel Orientation="Horizontal">
                    <Button>NOTIFICATIONS</Button>
                </StackPanel>
            </Grid>
        </dragablz:TabablzControl.HeaderPrefixContent>
Sorry - suffix?
James Willock
@ButchersBoy
Feb 23 2015 20:47
yeah
Shel2
@Shel2
Feb 23 2015 20:47
just a sec...
James Willock
@ButchersBoy
Feb 23 2015 20:47
blob
Shel2
@Shel2
Feb 23 2015 20:48
Okay - the suffix prevents the "+" from being pushed off the window
James Willock
@ButchersBoy
Feb 23 2015 20:48
:)
RESULT
not ideal, admittedly...i remember grappling with that months and months ago
Shel2
@Shel2
Feb 23 2015 20:48
Sorry I thought you had said prefix earlier! :)
James Willock
@ButchersBoy
Feb 23 2015 20:48
:)
we got there...so if you add the suffix to your app, does it work?
Shel2
@Shel2
Feb 23 2015 20:49
The suffix is easy to use - that works for me. Still the weird thing with >2 tabs getting shifted left when the left/right navigation buttons are added... not a big rush at the moment since there are lots of other pieces of the UI I still have to work on though.
Can I ask how I would style the prefix to look like normal tabs?
James Willock
@ButchersBoy
Feb 23 2015 20:50
well...
there is a Trapezoid control included in the lib
have a search for: MahAppsTrapezoidDragableTabItemStyle
So that Styles a DragablzItem, but you want to set up a similar style for your button
Shel2
@Shel2
Feb 23 2015 20:53
OK! Thanks!
James Willock
@ButchersBoy
Feb 23 2015 20:53
...then your next issue will be overlaying your HOME content when the button is clicked, and reverting to tab content when a tab is clicked
Shel2
@Shel2
Feb 23 2015 20:54
:)
James Willock
@ButchersBoy
Feb 23 2015 20:54
but thats a whole other issue :) you may find it easier to just use normal tabs, with the default close button turned off
Shel2
@Shel2
Feb 23 2015 20:54
But then I get back to adding the close button and only allowing dragging on certain tabs! :)
I might just be able to do a secondary panel on the left instead - might make everything a lot easier :)
James Willock
@ButchersBoy
Feb 23 2015 20:55
you know if you use MVVM for the tab header content you can have the close button on/off for individual tabs?
might be worth thinking about
Shel2
@Shel2
Feb 23 2015 20:55
Ah - okay
Thanks again for your help - I didn't mean to take up too much of your time!
James Willock
@ButchersBoy
Feb 23 2015 20:56
i have that up and running in a project at the day job, but dont have a demo to hand at the moment
np
good to have some feedback