I use RibbonControlsLibrary. How to align one RibbonGroup to the right? It should be only one group in tab. All other groups should be aligned to the left.
You cannot align the RibbonGroup to the right. The Ribbon doesn't provide the ability to do this.
What you can do is to align page header items... but I don't know if it's enough for you:
DevExpress
I had the same issue, and I finally found something to do this :
I have 3 RibbonGroupBox. Groupe1 may be aligned on left, Groupe3 may be aligned on right. Groupe2 is just an empty RibbonGroupBox I inserted between Groupe1 and Groupe3.
Code XAML :
<Fluent:Ribbon DockPanel.Dock="Top" Title="{x:Static p:Resources.MiseEnBarre}" x:Name="mainRibbon">
<Fluent:RibbonTabItem x:Name="MainMenu" Header="{x:Static p:Resources.MainMenu}" SizeChanged="MainMenu_SizeChanged">
<Fluent:RibbonGroupBox x:Name="Groupe1">
<Fluent:Button x:Name="autoNest" SizeDefinition="Large" LargeIcon="img\image_bar_Nesting.png" Header="{x:Static p:Resources.MenuAutoNest}" Click="AutoNest_Click" />
<Fluent:Button x:Name="saveFile" SizeDefinition="Large" LargeIcon="img\image_save.png" Header="{x:Static p:Resources.MenuSauvegarder}" Click="Sauvegarder_Click" />
</Fluent:RibbonGroupBox>
<Fluent:RibbonGroupBox x:Name="Groupe2">
</Fluent:RibbonGroupBox>
<Fluent:RibbonGroupBox x:Name="Groupe3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=AvailableCNClist}" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Text="{Binding Path=AvailableCNClist2}" HorizontalAlignment="Right"/>
</Grid>
</Fluent:RibbonGroupBox>
</Fluent:RibbonTabItem>
</Fluent:Ribbon>
Then to manage the Windows redimensioning, I add on my main window the event SizeChanged="MainWindow_SizeChanged" (In the case your RibbonGroupBox dimensions could also change, just add the same event on them).
private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
UpdateAlignRibbon();
}
private void UpdateAlignRibbon()
{
Groupe2.Width = MyWindow.ActualWidth - Groupe1.ActualWidth - Groupe3.ActualWidth;
}
In my case the Groupe3 RibbonGroupBox may change of dimension, so I call UpdateAlignRibbon() from 3 points :
After Initialization of my window(including defining the GroupBoxes content)
When the MainWindow has its dimensions changed
When Groupe1 or Groupe3 have its dimensions changed
Rover, You can try add RibbonGroup between last left RibbonGroup and Right align RibbonGroup and assign size to newly added ribbon related to window size.
example <RibbonGroup Width="400"></RibbonGroup>
it's looks following image
You can sort of hack in alignment but I'd recommend against it.
<r:RibbonGroup Header="This is a Filler Header With No Functionality but to Take Up Space" Visibility="Hidden">
<s:RibbonButton2/>
<s:RibbonButton2/>
<s:RibbonButton2/>
<s:RibbonButton2/>
</r:RibbonGroup>
The customer wanted their logo on the ribbon across the top of the page, but the more you add "false" elements to the bar, the quicker "true" elements will collapse when shrinking the window size.
Try this:
<RibbonTab Header="Home" x:Name="rtabHome" FlowDirection="RightToLeft" >
<RibbonGroup Header="Group">
<TextBlock Text="Example"/>
</RibbonGroup>
</RibbonTab>
Works with FlowDirection="RightToLeft".
Related
I'm trying to create 2 grid the first one have two buttons and the other one have a title I want to make the second grid get around the first one ...
here's my code>>
<Grid x:Name="pgtitle" >
<StackPanel x:Name="btn" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<AppBarButton Icon="More" Tapped="more_Tapped"/>
<AppBarButton Icon="List" Click="view_Click"/>
</StackPanel>
</StackPanel>
<RelativePanel x:Name="title">
<TextBlock x:Name="titletxt" Text="{Binding ViewModel.SelectedItem.Title}" FontSize="18" FontWeight="Bold" TextWrapping="Wrap"/>
</RelativePanel>
</Grid>
here's a picture for what am I trying to do>>
If you mean "get around" as in flow around, similarly to news articles and texts, that is not possible. All layout elements in XAML are rectangular and they don't take other sibling elements into account.
You can display the inner Grid in one column and other elements in second column, but the contents of such columns must be known beforehand.
Look into the RelativePanel element in UWP where you can place elements right or left of other elements. I think this can be achieved with that control.
For example, the RelativePanel will contain the smaller grid you have in your picture and will be the anchor to all other elements. You will have to set the other elements (children of the larger grid) to go on the right or bottom of the smaller grid.
I have a custom class called FluidPanel that extends Panel and overrides methods MeasureOverride and ArrangeOverride. The goal is to create the Google Keep appearence. Ok, it's working fine. (app link)
But, because I'm extending a basic Panel and using it as the ItemsPanelTemplate, I'm missing 2 things: Reorder and some transitions, that simply doens't work out of the box. See code:
<GridView CanReorderItems="True" CanDrag="True" AllowDrop="True">
<GridView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition FromVerticalOffset="200" IsStaggeringEnabled="True"/>
<ReorderThemeTransition/>
</TransitionCollection>
</GridView.ItemContainerTransitions>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<local:FluidPanel/><!--custom panel = reorder doesn't work-->
<!--<StackPanel/>--><!--reorder and animations work normally (reorder to see)-->
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<Grid Width="50" Height="50" Background="Red"/>
<Grid Width="50" Height="50" Background="Green"/>
<Grid Width="50" Height="50" Background="Blue"/>
<Grid Width="50" Height="50" Background="Orange"/>
<Grid Width="50" Height="50" Background="Purple"/>
<Grid Width="50" Height="50" Background="Pink"/>
</GridView>
So, the main question is: How to create a custom Panel with Reorder fully working, including animations? (like that offset to the left/right/...)
A second (less important) question is: And with the EntranceThemeTransition working?
I partially found the solution.
Unfortunately it's not as easy as it should be.
For custom Panels, it seems that we have to implement the Reorder manually, listening to the drag & drop events.
Here is an article about it: Extending GridView with Drag and Drop
and here is a simplified code about it.
The reorder animation is added by manually changing the Visual State:
private void OnDragOver(object sender, DragEventArgs e)
{
var item = (e.OriginalSource as FrameworkElement).DataContext as Note;
if (item == null) return;
e.Data.Properties["targetItem"] = item;
var itemContainer = (sender as ItemsControl).ContainerFromItem(item) as Control;
if (itemContainer == null) return;
VisualStateManager.GoToState(itemContainer, "BottomReorderHint", true);
}
But I still hope there is any easier way to do it, giving the fact that a lot of Panels implement it (StackPanel, ItemsWrapGrid, ...).
Still can't get the EntranceThemeTransition to work on the custom panel.
EDIT: workaround to make EntranceThemeTransition works
Is there a way to have a toolbar (stock/custom) which aligns all buttons together to one side, say, left?
I have 3 buttons, a,b,c on toolbar. If i dynamically make b hidden, then there is a visible gap between a and c. How can I have a toolbar which automatically closes gap between a and c together, but restores the order when b becomes visible again?
Thanks!
Info
I have tried <Toolbar />, <Stackpanel />, <DockPanel /> so far, but they did not align the buttons.
You need to make b Collapsed instead of Hidden
Refer to MSDN UIElement.Visibility Property:
In the WPF model, Hidden denotes a visibility state where the object
should not render, but should still occupy space in a WPF layout.
And more specific, as #Nayan pointed out, can refer to Visibility Enumeration:
Collapsed Do not display the element, and do not reserve space for it in layout.
Hidden Do not display the element, but reserve space for the element in layout.
Visible Display the element.
PS: That is why for BooleanToVisibilityConverter:
The Convert method returns Visibility.Visible when true is passed in or Visibility.Collapsed when false is passed in.
Use a StackPanel:
<StackPanel Orientation="Horizontal">
<Button Width="100" Click="Button_Click" />
<Button Width="100" Click="Button_Click" />
<Button Width="100" Click="Button_Click" />
<Button Width="100" Click="Button_Click" />
</StackPanel>
private void Button_Click(object sender, RoutedEventArgs e)
{
((Button)sender).Visibility = Visibility.Collapsed;
}
I'm using AvalonDock 2.0
I feel that it's supposed to be pretty basic but the documentation doesn't say a thing and I've played around for 2 hours to try and figure it out. So, I'm sorry if this is too simple.
I want exactly what the title says. The documentation mentions how to make a bottom side panel but only an auto-hidden one, which is not what I want.
I tried to toggle it's autohide in code-behind but the height wasn't affected so every single time the application starts the user has to drag it up to see the panel's content.
A bit hacky but this worked for me:
<xcad:DockingManager x:Name="DockingManager" Grid.Row="1" DocumentsSource="{Binding Documents}" Loaded="DockingManager_OnLoaded">
<xcad:LayoutRoot>
<xcad:LayoutPanel Orientation="Horizontal">
<xcad:LayoutDocumentPane></xcad:LayoutDocumentPane>
<xcad:LayoutAnchorablePane DockWidth="Auto" SelectedContentIndex="0">
<xcad:LayoutAnchorable Title="Right">
<Label>Right</Label>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorablePane>
</xcad:LayoutPanel>
<xcad:LayoutRoot.BottomSide>
<xcad:LayoutAnchorSide>
<xcad:LayoutAnchorGroup>
<xcad:LayoutAnchorable x:Name="OutputAnchorable" Title="Output">
<Label>Bottom</Label>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorGroup>
</xcad:LayoutAnchorSide>
</xcad:LayoutRoot.BottomSide>
</xcad:LayoutRoot>
</xcad:DockingManager>
Then in the code behind:
private void DockingManager_OnLoaded(object sender, RoutedEventArgs e)
{
OutputAnchorable.ToggleAutoHide();
// You might want to do this to get a reasonable height
var root = (LayoutAnchorablePane)OutputAnchorable.Parent;
root.DockHeight = new GridLength(100);
}
You need something like this
<xcad:LayoutPanel Orientation="Vertical">
<xcad:LayoutPanel Orientation="Horizontal" >
</xcad:LayoutPanel>
</xcad:LayoutPanel>
The second layout will create all the mix panels, the first will create the top or bottom in vertical way
I want to create a small button with three dots on it, like we see everywhere in visual studio, in order to load the FolderBrowserDialog. How best to create this button? Best I did was to get a 23x23 button with margin and padding set to 0, three dots for the text (only two appear) and auto-ellipses on (which makes a third dot appear). The button is still much larger than I'd like and the dots don't stand out very well.
You can copy the ellipsis character (…) from this post, or use Alt-0133 to produce it on demand.
Button.Text = "…";
The button is still much larger than I'd like...
Adjust the font size?
...and the dots don't stand out very well.
Make the font bold? (…)
I suppose if none of this works for you, an image is the next-best thing.
Use some image with dots.
☼☼☼ Use Character Map of Windows to find dots you need and cope/past them into the Text property.
Sample: ···
This is what we use: Button.Text = "...".
If it is too big, you can adjust the font size down.
Set the button's Text to '...' and change its Size property. You can also change the Button's Font, if necessary.
This is what I did to make it look nice in WPF (Using .NET 5)
Code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="34" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="Directory" VerticalAlignment="Center" />
<TextBox Grid.Column="1" Text="{Binding ImagesDirectory}"
VerticalAlignment="Center" VerticalContentAlignment="Center"
Height="24" />
<Button Grid.Column="2" Content="⚫⚫⚫"
FontSize="4" Margin="-1,5,5,5" Height="24" />
<Grid>
Preview: