I have an AppBarButton which displays a MenuFlyout when clicked. And that button is in a CommandBar.
However, after it is collapsed to the MoreButton due to the overflow, the AppBarButton's Flyout becomes hard to click. This is because the MoreButton creates a Flyout and the second click on the AppBarButton hides both Flyout.
So how can I resolve this problem?
Preferably, I want the AppBarButton to be converted to a MenuFlyoutSubItem, but I don't know how to do that.
Another problem about the overflow is that, although I have set the CornerRadius of the MoreButton to be 20 in its style, it is still a rectangle indeed. What is wrong?
<Button
x:Name="MoreButton"
Grid.Column="1"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
VerticalAlignment="Top"
Control.IsTemplateKeyTipTarget="True"
CornerRadius="20"
Foreground="{TemplateBinding Foreground}"
IsAccessKeyScope="True"
Style="{StaticResource EllipsisButton}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}">
<FontIcon
x:Name="EllipsisIcon"
Height="{ThemeResource AppBarExpandButtonCircleDiameter}"
VerticalAlignment="Center"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="20"
Glyph="" />
</Button>
This is Flyout light dismiss behavior and it's by design, for more please refer this document. For your requirement please avoid put the MenuFlyout in to MoreButton's flyout. I think you could place all the items in the SecondaryCommands and use AppBarSeparator to split into different areas.
<CommandBar Background="Transparent" IsOpen="False" DefaultLabelPosition="Right">
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="ReShare" Label="Share"/>
<AppBarButton Icon="Edit" Label="Edit"/>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Setting" Label="Settings">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control" Key="S" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
<AppBarButton Icon="Add" Label="Button 1">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control" Key="N" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
<AppBarButton Icon="Delete" Label="Button 2">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Key="Delete" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
<AppBarSeparator />
<AppBarButton Icon="FontDecrease" Label="Button 3">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control" Key="Subtract" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
<AppBarButton Icon="FontIncrease" Label="Button 4">
<AppBarButton.KeyboardAccelerators>
<KeyboardAccelerator Modifiers="Control" Key="Add" />
</AppBarButton.KeyboardAccelerators>
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>
Another problem about the overflow is that, although I have set the CornerRadius of the MoreButton to be 20 in its style, it is still a rectangle indeed. What is wrong
I used the following style and the CornerRadius works well
<Style TargetType="CommandBar">
.....
<Button x:Name="MoreButton"
Background="Red"
CornerRadius="20"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource EllipsisButtonRevealStyle}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
VerticalAlignment="Top"
Grid.Column="1"
Control.IsTemplateKeyTipTarget="True"
IsAccessKeyScope="True"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}">
<FontIcon x:Name="EllipsisIcon"
VerticalAlignment="Center"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="20"
Glyph=""
Height="{ThemeResource AppBarExpandButtonCircleDiameter}" />
</Button>
.....
</Style>
Update
<Border Grid.Column="1" CornerRadius="20">
<Button
x:Name="MoreButton"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
VerticalAlignment="Top"
Control.IsTemplateKeyTipTarget="True"
Foreground="{TemplateBinding Foreground}"
IsAccessKeyScope="True"
Style="{StaticResource EllipsisButton}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}"
>
<FontIcon
x:Name="EllipsisIcon"
Height="{ThemeResource AppBarExpandButtonCircleDiameter}"
VerticalAlignment="Center"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="20"
Glyph=""
/>
</Button>
</Border>
Related
I have a WPF application (C#) thats using a Material Designs PopUpBox for its menu navigation, as per the following:-
<materialDesign:PopupBox Margin="10,0,0,0" PlacementMode="BottomAndAlignLeftEdges" StaysOpen="false" IsEnabled="{Binding IsSystemControlsEnabled}" Style="{DynamicResource template_NavigationMenu}" >
<materialDesign:PopupBox.ToggleContent>
<materialDesign:PackIcon Foreground="White" Height="25" Kind="Menu" Width="25"/>
</materialDesign:PopupBox.ToggleContent>
<StackPanel Width="150" >
<Button Command="{Binding ScreenCommand}" CommandParameter="Dashboard" Content="Dashboard" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDashboard" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator/>
<Button Command="{Binding ScreenCommand}" CommandParameter="Encrypt" Content="Encrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuEncrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
<Button Command="{Binding ScreenCommand}" CommandParameter="Decrypt" Content="Decrypt" FontSize="12" FontWeight="Medium" Height="20" Name="MenuDecrypt" VerticalAlignment="Top" VerticalContentAlignment="Top" />
<Separator />
</StackPanel>
</materialDesign:PopupBox>
Is there a way to cascade this menu and add an extra layer? So for example, if I was to select or hover over the button for Encryption, it would they give me a new popupbox, just to the right, with some new options relating to encryption?
I'm trying to find something like this https://m2.material.io/components/menus (first image) but can't find anything relating to C# / XAML, so looking for some inspiration from the experts...
Any help is greatly appreciated.
Thank you
I am new in making WPF projects.
I searched on how to add Text in RibbonApplicationMenu maybe it looks that, there's the same questions to this in this site but trust me I implemented it but didn't works in me.
I've tried putting a "File" name in my <RibbonApplicationMenu>, I put Label="File" but it doesn't work. What can I try next?
Here's my XAML code:
<Ribbon x:Name="Ribbon">
<Ribbon.TitleTemplate>
<DataTemplate >
<TextBlock x:Name="FrontPageTitle" TextAlignment="Center" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Ribbon}}, Path=Title}" Width="{Binding ElementName=RibbonWindow, Path=ActualWidth}" />
</DataTemplate>
</Ribbon.TitleTemplate>
<Ribbon.HelpPaneContent>
<RibbonButton SmallImageSource="pack://application:,,,/MYSEP;component/Images/window.png" />
</Ribbon.HelpPaneContent>
<Ribbon.QuickAccessToolBar>
<RibbonQuickAccessToolBar>
<RibbonButton x:Name="QATButton1"
SmallImageSource="pack://application:,,,/MYSEP;component/Images/window.png" />
<RibbonButton x:Name="QATButton2"
SmallImageSource="pack://application:,,,/MYSEP;component/Images/window.png" />
</RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu Label="File">
<RibbonApplicationMenuItem Header="New Design Project"
x:Name="NewDesignProject"
ImageSource="pack://application:,,,/MYSEP;component/Images/newProject.png" Click="AddNewDesign"/>
<RibbonApplicationMenuItem Header="New Rating Project"
x:Name="NewRatingProject"
ImageSource="pack://application:,,,/MYSEP;component/Images/newProject.png" Click="AddNewRating"/>
<RibbonApplicationMenuItem Header="Open..."
x:Name="Open"
ImageSource="pack://application:,,,/MYSEP;component/Images/open.png" Click="OpenMysepProject"/>
</RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<RibbonTab x:Name="HomeTab"
Header="Home">
<RibbonGroup x:Name="Group1"
Header="Project">
<RibbonButton x:Name="Button1"
LargeImageSource="pack://application:,,,/MYSEP;component/Images/manageProject.png"
Label="Manage Project" />
</RibbonGroup>
<RibbonGroup x:Name="Group2"
Header="Vessel">
<RibbonButton x:Name="Button2"
LargeImageSource="pack://application:,,,/MYSEP;component/Images/addVessel.png"
Label="Add Vessel Design Mode" />
<RibbonButton x:Name="Button3"
LargeImageSource="pack://application:,,,/MYSEP;component/Images/info.png"
Label="Add Vessel Rating Mode" />
<RibbonButton x:Name="Button4"
LargeImageSource="pack://application:,,,/MYSEP;component/Images/delete.png"
Label="Delete Vessel" />
</RibbonGroup>
</RibbonTab>
</Ribbon>
Just like this image:
A number of possible (though complicated) solutions here:
How to set text at the head of a RibbonApplicationMenu
EDIT
I tested myself, just add this immediately after <RibbonApplicationMenu>:
<RibbonApplicationMenu.SmallImageSource>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,20,20"></RectangleGeometry>
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<TextBlock Text="File" FontSize="16" Foreground="White" />
</VisualBrush.Visual>
</VisualBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</RibbonApplicationMenu.SmallImageSource>
And here you go:
I am using the MaterialDesignThemes nuget package along with the Mahapps.Metro package
I have this DialogHost
<material:DialogHost Name="PopupAddCustom" HorizontalAlignment="Center" VerticalAlignment="Center" IsOpen="False" >
<material:DialogHost.DialogContent>
<StackPanel Margin="16" Orientation="Vertical">
<Label Content="Add custom date" FontSize="16" />
<DatePicker />
<StackPanel Orientation="Horizontal">
<Button Content="ACCEPT" Style="{DynamicResource MaterialDesignFlatButton}" IsDefault="True" Margin="0,8,8,0" Command="material:DialogHost.CloseDialogCommand" CommandParameter="True" />
<Button Content="CANCEL" Style="{DynamicResource MaterialDesignFlatButton}" IsCancel="True" Margin="0,8,8,0" Command="material:DialogHost.CloseDialogCommand" CommandParameter="False" />
</StackPanel>
</StackPanel>
</material:DialogHost.DialogContent>
</material:DialogHost>
That is being openend by this button
<Button MinWidth="120" Margin="10" Style="{StaticResource MaterialDesignRaisedAccentButton}" ToolTip="Add in a new custom date." Command="{x:Static material:DialogHost.OpenDialogCommand}" CommandTarget="{Binding ElementName=PopupAddCustom}" >
<StackPanel Orientation="Horizontal">
<Rectangle Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{StaticResource fa_plus}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="10,0,0,0" VerticalAlignment="Center" Text="Custom" />
</StackPanel>
</Button>
However when this dialog gets opened the ACCEPT and CANCEL buttons are disabled. So to check if anything was wrong I manually opened this dialog from the my MainWindow constructor like this
this.Loaded += delegate(object sender, RoutedEventArgs args)
{
this.PopupAddCustom.IsOpen = true;
};
When I open the dialog like this the button are in working order, am I missing something obvious here?
The problem was resolved by setting a command target for the buttons like this
CommandTarget="{Binding ElementName=PopupAddCustom}"
To save someone elses time: I had dialog content specified as command parameter and specifying CommandTarget did not help me.
What helps in my case, is to put CommandParameter before Command.
You can achieve that by passing content as resource.
Example:
Before:
<Button
...
Command="{x:Static material:DialogHost.OpenDialogCommand}"
>
<Button.CommandParameter>
<Grid>
** Dialog content **
</Grid>
</Button.CommandParameter>
** Button content **
</Button>
After:
<UserControl.Resources>
<Grid x:Key="MyDialogContent">
** Dialog content **
</Grid>
</UserControl.Resources>
<Button
...
CommandParameter="{StaticResource MyDialogContent}"
Command="{x:Static material:DialogHost.OpenDialogCommand}"
>
** Button content **
</Button>
And dialoghost buttons were not disabled anymore.
I've got a custom set of controls:
<Border Height="55" Margin="5,14,5,0" VerticalAlignment="Top" BorderThickness="1" BorderBrush="Black">
<Grid>
<TextBlock x:Name="SubjectNo" Text="1" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="36" Margin="0,1,36,0" d:LayoutOverrides="HorizontalAlignment" />
<TextBlock x:Name="Subject" Text="Subject NAME more " TextWrapping="Wrap" FontSize="24" FontWeight="Bold" Margin="26,0,90,19" d:LayoutOverrides="Height, TopPosition, BottomPosition" />
<TextBlock x:Name="Teacher" Text="BIG NAME HERE" TextWrapping="Wrap" FontSize="14.667" VerticalAlignment="Bottom" Margin="26,0,0,9" HorizontalAlignment="Left" Width="106" Height="17" d:LayoutOverrides="VerticalAlignment" />
<Grid Height="15" VerticalAlignment="Bottom" Margin="133,0,0,10" d:LayoutOverrides="VerticalAlignment">
<TextBlock x:Name="BegTime" Text="12:55 AM" TextWrapping="Wrap" FontSize="13.333" d:LayoutOverrides="Height, TopPosition, BottomPosition" SelectionHighlightColor="White" Margin="8,0,-8,0" />
<TextBlock x:Name="EndTime" Text="12:55 PM" TextWrapping="Wrap" FontSize="13.333" Margin="68,0,-12,0" d:LayoutOverrides="HorizontalAlignment, Height, TopPosition, BottomPosition" />
<TextBlock x:Name="Line" Text="-" TextWrapping="Wrap" FontSize="13.333" Margin="64,0,0,0" d:LayoutOverrides="Height, TopPosition, BottomPosition" />
</Grid>
<Border Margin="281,4,10,6" BorderBrush="Black" BorderThickness="1" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Center" Width="57">
<Grid>
<TextBlock x:Name="RoomNo" Text="1255" TextWrapping="Wrap" FontSize="24" d:LayoutOverrides="HorizontalAlignment, Width, TopPosition, BottomPosition" Margin="2,10,-2,0" />
<TextBlock x:Name="RoomWritten" Text="Room" TextWrapping="Wrap" FontSize="14.667" VerticalAlignment="Top" HorizontalAlignment="Stretch" d:LayoutOverrides="HorizontalAlignment, Width" Margin="9,0,4,0"/>
</Grid>
</Border>
<AppBarButton x:Name="appBarButton" Label="" Margin="158,0" VerticalAlignment="Bottom" Width="32" HorizontalAlignment="Stretch" Icon="Remote" Height="13" d:LayoutOverrides="VerticalAlignment"/>
</Grid>
</Border>
It looks like this
Now I want to add a button like this to make my control show additional info in the bottom, so I want it to expand from the bottom and show additional textblock, like windows 10 notification center does. Than the icon changes and when I press the button again, additional info hides. Can anybody help me?
The type of control you are looking for is called a ToggleButton. It has an IsChecked state property to facilitate the two states for your "open" and "closed". The logic and styling for what is displayed by you when IsChecked is true or false can be controlled via styles.
More information on MSDN: ToggleButton class
how i say in title, i have a datatemplate for a Telerik RadTileView, in the large content i have a toolbar with a play button, the idea is that when a user click this button, the images in the tile view change automatically, i already do that but i need change the image inside the play button with a stop icon, this is my data template:
<DataTemplate x:Key="contentTemplate">
<telerik:RadFluidContentControl>
<telerik:RadFluidContentControl.Content>
<Border>
<Image Source="{Binding Frame}" />
</Border>
</telerik:RadFluidContentControl.Content>
<telerik:RadFluidContentControl.LargeContent>
<Grid>
<Grid>
<Image Source="{Binding Frame}" />
</Grid>
<Border BorderBrush="Black" BorderThickness="1" Background="#80000000" Height="80" VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Style="{StaticResource BotonGrande}" Name="BotonImagenAtras" Click="BotonImagenAtras_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/izquierda.png" />
</Button>
<Button Style="{StaticResource BotonGrande}" Name="BotonImagenesPlay" Click="BotonImagenesPlay_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/play_on.png" />
</Button>
<Button Style="{StaticResource BotonGrande}" Name="BotonCaputarImagen" Click="BotonCaputarImagen_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/captura_img_on.png" />
</Button>
<Button Style="{StaticResource BotonGrande}" Name="BotonImagenAdelante" Click="BotonImagenAdelante_Click">
<Image Style="{StaticResource ImagenGrande}" Source="/VisorSeproban;component/Imagenes/derecha.png" />
</Button>
</StackPanel>
</Border>
</Grid>
</telerik:RadFluidContentControl.LargeContent>
</telerik:RadFluidContentControl>
</DataTemplate>
Thanks for your help!
Regards
try attaching an event an change the image when the event get fire. you can try with Javascript if you are running your app in a browser.