how can I change the width of CommandBar? I want the size of Desktop mode on Mobile mode.
Desktop mode:
image
Mobile mode: image
Edit:
This is my code, I don't use Flyout.
<CommandBar RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" Margin="0">
<CommandBar.SecondaryCommands>
<AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Click="shareButton_Click" Icon="ReShare" Style="{StaticResource AppBarButtonStyle1}" />
<AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Click="contactButton_Click" Style="{StaticResource AppBarButtonStyle1}" />
</CommandBar.SecondaryCommands>
the problem is not the commandbar. you need to check your xaml in the Flyout set the horizontal alignment to right of your items inside of the Flyout
The default overflow menu is styled to be distinct from the bar. You can adjust the styling by setting the CommandBarOverflowPresenterStyle property to a Style that targets the CommandBarOverflowPresenter. By default the overflow menu adapts its size and visuals based on the window width so that on small windows/screens it stretches to be the full width and only shows the border along the leading edge instead of around the entire menu. You can override this by re-templating the menu. In the example below I'm removing some of the visual states that alter the BorderThickness and I'm hard-coding the MaxWidth / MinWidth as well as the HorizontalAlignment (to prevent it from being stretched on smaller windows).
<CommandBar Margin="0">
<CommandBar.CommandBarOverflowPresenterStyle>
<Style TargetType="CommandBarOverflowPresenter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CommandBarOverflowPresenter">
<Grid x:Name="LayoutRoot"
MaxWidth="480"
MinWidth="196"
HorizontalAlignment="Right"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1,1,1,1">
<ScrollViewer HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter x:Name="ItemsPresenter" Margin="0,7,0,7" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</CommandBar.CommandBarOverflowPresenterStyle>
<CommandBar.SecondaryCommands>
<AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Icon="ReShare"/>
<AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti"/>
</CommandBar.SecondaryCommands>
</CommandBar>
Related
I want the foregroud color of Placeholder is Foreground="#ffae19". But i get it in black color.
Can any one have solution for this :-)
<ComboBox x:Name="selectLanguage" Background="#5d198e" Foreground="#ffae19" PlaceholderText=" SELECT LANGUAGE" Width="280" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center" DropDownOpened="selectLanguage_Click">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid Background="#5d198e" Width="280" Height="40">
<TextBlock Foreground="#ffae19" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding languageName}" ></TextBlock>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
You can override these default resource keys to set the color of the placeholder text without retemplating the control:
<StaticResource x:Key="ComboBoxPlaceHolderForeground" ResourceKey="SystemControlPageTextBaseHighBrush" />
<StaticResource x:Key="ComboBoxPlaceHolderForegroundFocusedPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
You have to edit the default styles of he combobox. Use blend for that, right click on the combobox->edit style. you will get the default style. Look out for placeholder style, and change it accordingly.
I have some problem: need to make animation that starts from element inside viewbox and finishes outside viewbox
It means:
I have page where elements are placed. There is text block on the top of it and viewbox. I place gridview into this viewbox. And one moment it should start animation from gridview item
<Viewbox HorizontalAlignment="Left" Stretch="Uniform" VerticalAlignment="Top" x:Name="vbChallengeView" >
<Grid x:Name="gdChallenges">
<GridView
Margin="92,64,68,0"
x:Name="GvChallenges"
ItemsSource="{Binding Source={StaticResource GroupedItemsViewSource}}"
VerticalAlignment="Top"
HorizontalAlignment="Left"
ItemTemplate="{StaticResource ChallengeTileTemplate}"
ItemClick="GvPack_OnItemClick"
IsItemClickEnabled="True"
IsZoomedInView="False"
SelectionMode="None"
>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Margin" Value="0,0,24,24" />
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximumRowsOrColumns="5" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</Viewbox>
How can I determine item size in view box and it's position relatively current window?
Thanks for any ideas
Hi there I am trying to layout may App in dockpanel.
I have on relatively wider Grid on left and narrow Grid on right. I want the right grid of fixed width but left one to grow as I resize my main window. Here is my XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="WebSpark.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<DockPanel x:Name="LayoutRoot" Background="#FF474747" LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="23" Background="#FFEF1212" />
<Grid DockPanel.Dock="Top" Height="23" Background="#FFF7E30D" />
<Grid DockPanel.Dock="Left" Background="#FF0A38F1" MinHeight="396" Width="{Binding ElementName=LayoutRoot,Path=ActualWidth}" MaxWidth="428" />
<Grid DockPanel.Dock="Right" HorizontalAlignment="Right" Width="198" />
</DockPanel>
Here is the behavior. Restored window: http://s17.postimage.org/tk1pov6b3/Restored.png
Maximized window: http://s9.postimage.org/457s5r23j/Maximized.png
As you can see in the maximized window, the blue panel should have stretched, but it is not. What's wrong here? Please help. Thank you.
Take advantage of LastChildFill="True". This code ensures that the grey box has fixed size and the blue one has a variable size.
<DockPanel x:Name="LayoutRoot" Background="#FF474747" LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="23" Background="#FFEF1212" />
<Grid DockPanel.Dock="Top" Height="23" Background="#FFF7E30D" />
<Grid DockPanel.Dock="Right" HorizontalAlignment="Right" Width="198" />
<Grid DockPanel.Dock="Left" Background="#FF0A38F1" MinHeight="396" />
</DockPanel>
I'm developing a Windows Phone app.
I have the following XAML code:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="GameList" Margin="12" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,10,10,5" Height="67" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
But I couldn't set textblock centered (vertically and horizontally).
There are two ways to achieve this.
The first solution is to specify the ListBox's ItemContainerStyle inside the ListBox and set the HorizontalContentAlignment property to Center.
<ListBox ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
The second solution is to define a style, and apply the style to the ListBox (so it's reusable).
<Style x:Key="ListBoxCenteredItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
<ListBox
ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}"
ItemContainerStyle="{StaticResource ListBoxCenteredItemStyle}"/>
The ItemTemplate of a ListBox is just a DataTemplate for displaying each data item. If there is a need to style a single row, the ItemContainerStyle is the guy. :)
i want to change my button color when is pressed :
<DataTemplate>
<!--Click="btn_Click"-->
<ItemsControl DataContext="{Binding}" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Name="btn"
DataContext="{Binding}"
Height="65" Width="79"
Background="Gray"
>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Ellipse Name="elipse1" Height="65" Width="79" Fill="{Binding Path=ButtonColor}" Visibility="Collapsed"></Ellipse>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="elipse1" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
it doesnt seem to work farther then that wjen i use the all triger <> the gray button is not showen has if this template is stronger then the binding ?is it true ? how to outcome it ?
The problem is that when the button isn't pressed - it has no visual impact (Visibility="Collapsed") - there are no elements inside the Button - thus it becomes invisible (and then it is hard to Press it :)).
You need to put something besides the Ellipse in the ControlTemplate to have it show something instead of the ellipse.