I'm using Fluent Ribbon and I use ApplicationMenu for Ribbon's Menu. I want to create an ApplicationMenu look like this:
Right now I'm using a StackPanel to create the item which inside the red circle in the image above.
So I wonder if there a better way to create that? Is Fluent Ribbon support a control like that? If yes, what control is that and how can I use it?
To create a header for some content, you can try HeaderedContentControl. Eg;
<HeaderedContentControl Header="_JPEG Picture" Canvas.Left="220" Canvas.Top="116">
<DockPanel Margin="-50 0 0 0">
<Image Source="img/penguins.jpg" Width="50" Height="50"/>
<TextBlock Text="save a picture"/>
</DockPanel>
</HeaderedContentControl>
For keyboard mnemonics, you can provide template for Header like :
<HeaderedContentControl.HeaderTemplate>
<DataTemplate>
<Label Content="{Binding Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=HeaderedContentControl}}"/>
</DataTemplate>
</HeaderedContentControl.HeaderTemplate>
Related
I write a vector editor. Before I started using TabControl, everything worked for me. However, it became necessary to upload several open files simultaneously. Each open file is displayed on TabItem. As a result of chatting on forums, I found out that you need to create an MVVM to correctly display data from different different files. I was advised to Set a common template for all tabs. By adding items to the collection that TabControl is linked to, tabs will be created automatically using this template. I did the following:
<TabControl x:Name="Drawing_TabControl" Grid.Row="0" Background="WhiteSmoke"
SelectionChanged="Drawing_TabControl_SelectionChanged">
<TabControl.ContentTemplate>
<DataTemplate>
<Grid x:Name="Drawing_Grid_Tab"
Background="WhiteSmoke">
<Canvas x:Name="coordinateCanvas_Tab"
Background="GhostWhite"
Height="6cm"
Width="16cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"></Canvas>
<Canvas x:Name="gridCanvas_Tab"
Background="Transparent"
Height="6cm"
Width="16cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"
SizeChanged="gridCanvas_SizeChanged"></Canvas>
<Border x:Name="drawing_Border_Tab"
BorderBrush="Black"
BorderThickness="0.5 0.5 0.5 0.5"
Height="4cm"
Width="14cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"></Border>
<Canvas x:Name="drawing_gridCanvas_Tab"
Background="White"
Height="4cm"
Width="14cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"></Canvas>
<Canvas x:Name="drawing_tempCanvas_Tab"
Background="Transparent"
Height="4cm"
Width="14cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"></Canvas>
<Canvas x:Name="drawingCanvas_Tab"
Background="Transparent"
Height="4cm"
Width="14cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ClipToBounds="True"></Canvas>
</Grid>
</DataTemplate>
</TabControl.ContentTemplate>
<TabItem x:Name="drawTabItem1"
Header="Макет_1" Background="WhiteSmoke">
</TabItem>
</TabControl>[enter image description here][1]
How can I access x:Name="coordinateCanvas_Tab" in the back code, for example?
If you've been advised and have implement that advice to change to an MVVM code structure then you do not access the XAML component directly from the code behind file anymore.
Instead you need to wire up a two way binding between your View XAML and the ViewModel you are using.
This is primarily done by utilising the BindingContext object in the view after the screen is initialized in your constructor code behind.
After that you can then assign values to a Collection object in your ViewModel and bind to it in the XAML. To do the dynamic tab insertion you want to do you can make use of the BindableLayout attribute then in the ItemTemplate bind values for each tab from the collection objects.
Have a look at this guide for a better understanding of Bindings.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm
I have TabControl.
I want move tabs to the left but window with content should not change the size.
Result:
My code:
<controls:TabControl Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" x:Name="MyTabControl" BorderBrush="Transparent" BorderThickness="0" Padding="0">
<controls:TabControl.Resources>
<DataTemplate x:Key="ClosableTabItem">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="textBlockName" VerticalAlignment="Center" Text="{Binding}"/>
<HyperlinkButton Margin="6,0,0,0" x:Name="tabItemClose" VerticalAlignment="Center"
Click="tabItemClose_Click">
</HyperlinkButton>
</StackPanel>
</DataTemplate>
</controls:TabControl.Resources>
<controls:TabItem Header="Main" x:Name="MainTabItem" ToolTipService.ToolTip="Main" >
</controls:TabItem>
</controls:TabControl>
I won't really post a huge answer with a lot of XAML , rather i will give you some basic ideas of what you can do :)
1.Inside each tabitem,just add a grid and create two columns.Place every required element in the middle column and make sure the Grid's HorizontalAlignment and VerticalAlignment are set to Stretch
You can customize the template of your tabcontrol and set required width/margin of TabPenl/ContentPresenter.
I think 1 is the easiest solution so far,if you want to use 2 , leave a comment and i'll add some helpful XAML
Hope this helps :)
first post here so if I do anything wrong please slap me.
I'm currently trying to learn UWP code and I want to try to create a bottom naivation bar. I'm trying to work with stackpanels to do so
The idea is that when a stackpanel is clicked / tapped it should load a new page into viewport, however I can't figure out the correct code to do so. Here's an short version of my stackpanel:
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<StackPanel Name="FirstButton" Tapped="FirstButton_Tapped">
<TextBlock x:Name="Icon1" />
<TextBlock x:Name="Text1" />
</StackPanel>
<StackPanel Name="SecondButton" Tapped="SecondButton_Tapped">
<TextBlock x:Name="Icon2" />
<TextBlock x:Name="Text2" />
</StackPanel>
<StackPanel Name="ThirdButton" Tapped="ThirdButton_Tapped">
<TextBlock x:Name="Icon3" />
<TextBlock x:Name="Text3" />
</StackPanel>
I chose stackpanel because that was the best way for me to have a bottom and horizontal aligned bar with an icon on top and text displaying under it.
(if you got a better idea feel free to post it)
Now the question is how i should write my C# code so that the Tapped event will load a second page into the viewport.
(further, the style I'm aiming for is something similar to what deezer uses, example is here: http://imgur.com/WNNi96v
Thank you in advance!
As #Pedro G. Dias says far better to use Button control as it has many more benefits (Visual States) that you associate with user clicking/ Tapping a Button rather than using the Tap event of StackPanel
You can customise a Button easily by utilising the ContentTemplate
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Button x:Name="FirstButton" Click="FirstButton_Click">
<Button.ContentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="Icon1" />
<TextBlock x:Name="Text1" />
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>
<!--More buttons here-->
</StackPanel>
Simply create buttons and place them inside each stackpanel. The button.Content property of the Button control will let you put the two textblocks inside it.
I am working on WPF and prism5 and also using RadTabControl,I am able to create tabs dynamically, now issue is i am not able to set tab header, i am using eventAggregator, value is coming fine till shellViewModel but its not able to set Tab header
My tab control is in shellview.xaml its code is
<telerik:RadTabControl prism:RegionManager.RegionName="ContentRegion"
Margin="1" x:Name="tabControl"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource TabItemTemplate}"/>
and here is my code for tab item
<DataTemplate x:Key="TabItemTemplate">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="{Binding TabHeader}"/>
<telerik:RadButton Command="{Binding RemoveItemCommand}"
Style="{StaticResource CloseButton}"
Margin="10,0,0,0"
ToolTipService.ToolTip="Remove item" />
</StackPanel>
</DataTemplate>
tab is creating fine with its view but its not able to set tab header value, Please let me know what is the issue.
Thanks
Issue was i was not setting TabHeader property in its own ViewModel which was causing not to display header name.
Thanks
Here is my scenario. Working with Bing Map control(MVVM):
<m:Map x:Name="MainMap"
ZoomLevel="{Binding MapZoomLevel, Mode=TwoWay}"
Center="{Binding MapCenter, Mode=TwoWay}"
LogoVisibility="Collapsed"
CopyrightVisibility="Collapsed"
CredentialsProvider="{Binding BingApiKey}"
UseInertia="True"
Mode="Road" Grid.Column="2" Grid.RowSpan="5">
<m:MapItemsControl
ItemsSource="{Binding Source={StaticResource WorkLayerData}}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<Border m:MapLayer.Position="{Binding Location}"
Background="LightPink" BorderBrush="Black">
<TextBlock Text="{Binding DisplayId}" />
</Border>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:Map>
On a bottom you see how I bind my "custom" pushpins by simply declaring DataTemplate with Border and TextBlock.
What I want is to declare 3 templates for the same item and choose them based on ZoomLevel property of MainMap
For example, when ZoomLevel<=3 I willdisplay small dots, when it is between 3 and 8 I will display more fancy pushpin with ID and when it's 8+ I may display even more info.
It's a simple idea but I'd like to know if possible..
Have a look at a DataTemplateSelector solution for Silverlight.