I have the following GridView
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Margin="0,-14,0,0"
Padding="0,0,0,50"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel x:Name="ItemGridViewVirtualizingStackPanel" Margin="120,0,120,0" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
...
In <VisualState x:Name="FullScreenPortrait"> I try to change the Margin
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridViewVirtualizingStackPanel" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="100,0,20,0"/>
</ObjectAnimationUsingKeyFrames>
But Error appears Cannot resolve TargetName ItemGridViewVirtualizingStackPanel.
So how to change Margin of VirtualizingStackPanel?
You cannot reference controls created from an ItemTemplate in the StoryBoard, because the name you used is the name of the ItemTemplate, and not the control(s) generated from the template.
In this situation I would either react to the orientation change in the code behind and change the margin of the controls by hand in C#, or I would bind the Margin of the VirtualizingStackPanel to a property of your view model, and update that property accordingly when the orientation changes.
The solution you choose might depend on that how much knowledge of the presentation you'd like to put in your view model.
Related
I would like to bind a TabItem's visibility property to a bool property in my viewmodel (via converter, true=visible false=collapsed), but the visibility property on the TabItem does not hide the tab. I don't want to hide all of the tab, just individual ones.
Does anyone know how this can be achieved?
I wanted to have something similiar. I asked the developer about it, but this is not possible with Dragablz (which is Tabablz). The TabItem itself is not used in dragablz.
A workaround for this could be using materialdesign radiobuttons as tab headers instead of dragablz. Radio buttons can be collapsed.
<StackPanel Orientation="Horizontal" Margin="4">
<RadioButton x:Name="FirstTab" Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" Visibility="Collapsed" IsChecked="True" Content="FIRST" />
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="False" Content="SECOND" />
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="False" Content="THIRD" />
</StackPanel>
now you just have to create some grids below them, which have their visibility bound to the IsChecked attribute of the corresponding radio button. This way you can show only the grid which is bound to the currently selected radio button. You need a bool2visibility converter, maybe the default one shipped with wpf works (the one in my example is a custom one).
<Grid Visibility="{Binding IsChecked, Source={x:Reference FirstTab}, Converter={StaticResource Bool2VisibilityConverter}}">
I set the icons in my SecondaryCommand of CommandBar but aren't shown. Why?
<CommandBar RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" Margin="0">
<CommandBar.SecondaryCommands>
<AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Click="shareButton_Click" Icon="ReShare" />
<AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Click="contactButton_Click" />
</CommandBar.SecondaryCommands>
</CommandBar>
They are not shown because of the default AppBarButton template. You will need to modify it.
Just follow these steps:
Temporarily put an AppBarButton in the CommandBar.PrimaryCommands collection.
Right click the button in the designer and click on Edit Template > Edit a Copy...
In the dialog that opens enter a name for your style, e.g. MyAppBarButtonStyle
Set this style to your secondary buttons:
<CommandBar.SecondaryCommands>
<AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Icon="ReShare" Style="{StaticResource MyAppBarButtonStyle}" />
<AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Style="{StaticResource MyAppBarButtonStyle}" />
</CommandBar.SecondaryCommands>
Modify the style to your liking.
By default the following elemnt is used in the overflow menu:
<TextBlock x:Name="OverflowTextLabel" Foreground="{TemplateBinding Foreground}" FontSize="15" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="Stretch" Margin="12,0,12,0" Padding="0,5,0,7" TextAlignment="Left" TextWrapping="NoWrap" Text="{TemplateBinding Label}" TextTrimming="Clip" Visibility="Collapsed" VerticalAlignment="Center"/>
You might want to replace it with something like that:
<StackPanel x:Name="OverflowContentRoot" Orientation="Horizontal" Visibility="Collapsed" MinHeight="{ThemeResource AppBarThemeCompactHeight}">
<ContentPresenter x:Name="OverflowContent" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Height="20" Margin="0,14,0,4"/>
<TextBlock x:Name="OverflowTextLabel" Foreground="{TemplateBinding Foreground}" FontSize="15" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="Stretch" Margin="12,0,12,0" Padding="0,5,0,7" TextAlignment="Left" TextWrapping="NoWrap" Text="{TemplateBinding Label}" TextTrimming="Clip" VerticalAlignment="Center"/>
</StackPanel>
You will also need to modify the overflow visual state to display your new template:
<VisualState x:Name="Overflow">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OverflowContentRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
And increase the button width:
<Setter Property="Width" Value="150"/>
Of course, you'll want to further modify the template to your liking, but this should at least get you going.
Damir's answer somehow put me on the right track and after spending a stupid amount of time on this, I eventually found out a solution that's simple.
Note that it may not suit everyone as the buttons don't get highlighted when hovering over with your mouse but it's the closest and easiest way I've figured out on how to do it on a UWP solution
First define a ControlTemplate in your Styles.xaml or your Page.Resources as such:
<ControlTemplate x:Key="SecondaryCommandTemplate" TargetType="AppBarButton">
<Grid x:Name="Root" Background="{TemplateBinding Background}">
<Grid x:Name="ContentRoot" HorizontalAlignment="Stretch" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0" VerticalContentAlignment="Center"
VerticalAlignment="Stretch" x:Name="Content"
AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch"
Height="20" Margin="7,0,7,0"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" x:Name="TextLabel"
Foreground="{TemplateBinding Foreground}" FontSize="12"
FontFamily="{TemplateBinding FontFamily}" TextAlignment="Left"
TextWrapping="Wrap" Text="{TemplateBinding Label}"/>
</Grid>
</Grid>
</ControlTemplate>
Then simply define the Template your SecondaryCommands:
<CommandBar.SecondaryCommands>
<AppBarButton Label="Settings"
Icon="Setting"
Command="{Binding CommandBarViewModel.SettingsCommand}"
Template="{StaticResource SecondaryCommandTemplate}"/>
<AppBarButton Label="Admin"
Icon="Admin"
Command="{Binding CommandBarViewModel.SettingsCommand}"
Template="{StaticResource SecondaryCommandTemplate}"/>
</CommandBar.SecondaryCommands>
It's a simple as that! What I don't get is that after following Damir's suggestion, and examining the XAML style that was generated for the button, I ended up removing all the visual states and I noticed that both my icon and text were displayed!! Why?? I don't understand why would Microsoft want to hide the icon in the SecondaryCommands and I'll be honest, I didn't spot the specific code that actually did it. Once I removed all the VisualStates, I noticed I was left with a template and then it was just a case of adding a grid and playing around with VerticalAlignment, HorizontalAlignment and 'Margin'.
Hope this helps!
Here's a much simpler, less elegant, way to do it. It works because most UWP icons are glyphs of the Segoe MDL2 Assets Font included in Windows.
Look up the Unicode point for the symbol you want from Microsoft's
Segoe MDL2 Assets
Guide
(eg. E702 for the Bluetooth icon, E72D for the Share icon).
Use something like UnicodeMap to
show that letter on screen. Don't worry that it looks like a blank
square, it'll work in your app.
Copy the character into your XAML as below, making sure to set the FontFamily of your AppBarButton to Segoe MDL2 Assets.
<CommandBar.SecondaryCommands>
<AppBarButton FontFamily="Segoe MDL2 Assets" Label=" Help"/>
<AppBarButton FontFamily="Segoe MDL2 Assets" Label=" Update database"/>
</CommandBar.SecondaryCommands>
And this is what you'll get.
I use this technique in an app that's localised to Russian and Chinese with no problems.
Well its pretty easier than this, use the reference microsoft.midiGmDls in your proyect and it's done.
I have a UWP application, I have added a button but when I debug the application, I can't see the button. If I add a texblock or textBox I can see them, but not the button.
I have set IsEnabled to true and visibility to visible but I am not able to solve the problem.
Also I have tried to click in the place where it should be the button but nothing happens.
This happens when I debug in local machine and when I debug in a emulator of windows phone 10.
Thank you so much.
EDIT: the axml code
<Page
x:Class="SqliteEF7UWP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SqliteEF7UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Transparent">
<Button x:Name="GetVideos" IsEnabled="True" Visibility="Visible" Background="Aquamarine" Content="Buscar Videos" HorizontalAlignment="Left" Margin="120,98,0,510" VerticalAlignment="Stretch" Click="button_Click"/>
<TextBlock x:Name="textBlock" Foreground="BlueViolet" HorizontalAlignment="Left" Margin="101,59,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="34" Width="132"/>
<TextBox x:Name="textBox" HorizontalAlignment="Left" Margin="213,59,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
</Grid>
</Page>
The margin you set for the Button is too aggressive. The object is now "squeezed". For example set Margin to "120,98,0,200" (or simply "120,98") instead of "120,98,0,510" and it should be visible.
BTW using hardcoded margins to setup the user interface is probably not a good idea. Use for example the Grid with columns and rows instead of margins.
My goal is to do simple animations (es fadeIn, fadeOut) of a TextBlock for example.
How can I do it? I searched some explanation but I found them very very complicated, talking about scenarios, ecc. I would know if it can be more simple, or if someone can give me a simple explanation of the procedure.
Thanks in advance.
This code should give you an idea how to do it (the duration could be reduced if it's too slow for you)
This is the Xaml:
<Grid Grid.Row="1">
<Grid.Resources>
<Storyboard x:Name="FadeOutStoryboard">
<!-- This animation will animate the value of the Canvas.Left property of the rectangle Scenario1Rectangle to 300. -->
<DoubleAnimation
Storyboard.TargetName="txtToFade"
Storyboard.TargetProperty="Opacity"
Duration="0:0:1"
To="0"
/>
</Storyboard>
<Storyboard x:Name="FadeInStoryboard">
<!-- This animation will animate the value of the Canvas.Left property of the rectangle Scenario1Rectangle to 300. -->
<DoubleAnimation
Storyboard.TargetName="txtToFade"
Storyboard.TargetProperty="Opacity"
Duration="0:0:1"
To="1"
/>
</Storyboard>
</Grid.Resources>
<StackPanel>
<TextBox Name="txtToFade"></TextBox>
</StackPanel>
</Grid>
And in the code behind this is how you execute the storyboards:-
FadeOutStoryboard->Begin();
or
FadeInStoryboard->Begin();
You can use the VisualStateManager to control the animations based on events (such as mouse over etc).
Have you tried the animation sample at this location?
http://code.msdn.microsoft.com/windowsapps/Animations-f758de70
I'm using a pivot control and binding my collection of images to it. I'm having a problem with alignment of the photos.
If all the photos are landscape, they align at the top, and I am unable to use the gesture control anywhere below the photo.
If they are a mix of portrait/landscape, the images appear ok, until I rotate the device. Then the portrait images are extremely zoomed in, and the landscape images are located half way down the screen.
I'm new to WP7 development and the layout is still pretty foreign to me. Any assistance would be appreciated. I'm sure someone has to have created a basic photo viewer like this....
<controls:Pivot Name="photoPivot" Loaded="photoPivot_Loaded"
ItemsSource="{Binding _photos}">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<Grid Height="1" Width="1"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Image VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="{Binding photo_link}" />
</DataTemplate>
</controls:Pivot.ItemTemplate>
<controls:Pivot.ItemContainerStyle>
<Style TargetType="controls:PivotItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</controls:Pivot.ItemContainerStyle>
</controls:Pivot>
I was able to solve this by removing all height/width definitions from the grid in the data template and the LayoutRoot grid.