Reference string from resx resource in XAML style - winrt-xaml

I have button style in my Win10 UAP. The style has tooltip.
How do I make this style reference text in resx string resources?
<Style x:Key="MyButtonStyle" TargetType="Button" >
...
<Setter Property="ToolTipService.ToolTip" Value="<string in resx resources>" />
</Style>

Hello in UWP it is best to use .resw not .resx. Here is how you can do it with .resw resources:
<Style x:Key="CustomButtonStyle" TargetType="Button">
<Setter Property="ToolTipService.ToolTip">
<Setter.Value>
<TextBlock x:Uid="CustomText" />
</Setter.Value>
</Setter>
</Style>
My .resw file looks like:
Name -> CustomText.Text
Value -> This is custom text

Related

Width CommandBar (UWP)

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>

define a custom style to a ListViewItem in a universal app

I am trying to set this Style to my ListViewItems when the Mouse hover on them:
I have modified the Style from the App.xaml file but this doesn't solve my problem
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="#d9d7ec" />
Then,I did a Style when Mouse hover on it,but this either doesn't work
<Style x:Key="listItemmenuStyle"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Duration="0" To="#d9d7ec" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="listItem1" />
<ColorAnimation Duration="0" To="#393185" Storyboard.TargetProperty="(ListViewItem.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#d9d7ec" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="listItem1" />
<ColorAnimation Duration="0" To="#393185" Storyboard.TargetProperty="(ListViewItem.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="listItem1" Stroke="Transparent" Fill="Transparent" Margin="0"/>
<ContentPresenter x:Name="Content1"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and this is How I apply this Style to the ListView:
<ListView Style="{Binding Color, Source={StaticResource listItemmenuStyle}}">
<ListView.ItemTemplate >
<DataTemplate>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<TextBlock x:Name="day" Text="{Binding Path=day}" Foreground="#797978"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate >
</ListView
Please How can I modify the Style to have a ListviewItem like the image above
thanks for help
Update:
I tried this solution,and it changed the Background color of ListViewItem when I hover,but I get always a problem in defining the Foreground Color when I hover on every ListViewItem,even with change of the PointerOverForeground color propeerty:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
FocusSecondaryBorderBrush="#d9d7ec"
PlaceholderBackground="#d9d7ec"
PointerOverBackground="#d9d7ec"
PointerOverForeground="#342d65"
SelectedBackground="#d9d7ec"
SelectedForeground="#d9d7ec"
SelectedPointerOverBackground="#342d65"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center"
Foreground="#342d65"
/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Don't set Foreground color same as PointerOverForeground color, you can't distinguish the color when you hover on an item. I think you should set different colors for Foreground and PointerOverForeground. According to your image, maybe Foreground should be set to Gray:
<ListView Name="myList">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
FocusSecondaryBorderBrush="#d9d7ec"
PlaceholderBackground="#d9d7ec"
PointerOverBackground="#d9d7ec"
PointerOverForeground="#342d65"
SelectedBackground="#d9d7ec"
SelectedForeground="#342d65"
SelectedPointerOverBackground="#d9d7ec"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center"
Foreground="Gray" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>

Win10 Xaml: How to get scale factor of viewbox?

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

Trigger to set wpf textbox borderbrush not working

Im trying to set the background borderbrush on a simple textbox when the textbox has focus.
This is my style
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsFocused" Value="False">
<Setter Property="BorderBrush" Value="Blue"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="Red"/>
<!--<Setter Property="Background" Value="Red"/>-->
</Trigger>
IsFocus = False works correctly however the trigger for true doesnt.
I have commented out the background setter but if I uncomment it I can see that the background is been set to red.
What do I need to do differently to change the border colour when the textbox has focus?
Thank you.
If your BorderThickness to "1" (default) then the focussed style you get is the standard 3D one of the control. You could restyle the control using a contenttemplate but a simple (although not the most elegant solution) would be to simply set the border thickness to something other than "1" as i've done in the sample below.
<TextBox Width="200" Height="25" BorderThickness="0.99">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="BorderBrush" Value="Red" />
<Style.Triggers>
<Trigger Property="IsFocused" Value="False">
<Setter Property="BorderBrush" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>

Center a TextBlock inside a ListBox.ItemTemplate

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. :)

Resources