We Keep Coding

UWP Hamburger navigation menu error when using visual triggers - XAML

I'm creating a Hamburger navigation UI for an UWP using Visual triggers and I get this error.
"An animation is trying to modify an object named 'HamburgerButtonMobile', but no such object can be found in the Page."
This is my code
<VisualState.Setters>
<Setter Target="HamburgerButtonMobile.Visibility" Value="Collapsed" />
</VisualState.Setters>
<Pivot x:Name="MoviesPivot" Title="MOVIES">
<Pivot.TitleTemplate>
<DataTemplate>
<RelativePanel>
<TextBlock Text="{Binding}" FontSize="72" Foreground="#FF21B255" FontWeight="Light" RelativePanel.AlignRightWithPanel="True" x:Name="titleName"/>
<Button x:Name="HamburgerButtonMobile" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Click="HamburgerButtonMobile_Click" RelativePanel.LeftOf="titleName" RelativePanel.AlignVerticalCenterWithPanel="True" />
</RelativePanel>
</DataTemplate>
</Pivot.TitleTemplate>

The reason that your Visual Trigger can't see the item is because the item you're trying to access lives inside of a DataTemplate. It 'Doesn't Exist' yet
I THINK what you want to do is add the visual trigger to the RelativePanel.
Honestly it's hard to say without seeing more code.
<RelativePanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="BlahNameState">
<VisualState.Setters>
<Setter Target="HamburgerButtonMobile.Visibility" Value="Collapsed" />
</VisualState.Setters>

Repositioning Children in RelativePanel through VisualStates

I have Relative Panel with a bunch of Children in it. I want to change the position of children by AdoptiveTrigger in VisualStates.
The problem is when i want to change an element position from Below of other element to right of that element, I've to remove the value of Below Attached Property and then set the RightOf property to make it work,otherwise it crashes the app.
Now i want to now how to remove that Below Value?
I've tried to
a.reset the binding in Properties Window for each state and then assigning my values
b.setting that value to empty string like "";
c.Ignoring that property.
None of these worked!
please help me!

Setting the attached property RelativePanel.Below to empty can work. Besides this we can also slove this problem by setting AlignTopWith or AlignVerticalCenterWith property.
This works because the priority of AlignTopWith is higher than Below and for AlignVerticalCenterWith property, it is applied if there is no conflict. As my test, AlignVerticalCenterWith's priority is also higher than Below.
For more information, please see the Conflicting relationships section in RelativePanel class.
Following is the sample I used to test:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BlueRect.(RelativePanel.Below)" Value="" />
<Setter Target="GreenRect.(RelativePanel.RightOf)" Value="BlueRect" />
<Setter Target="GreenRect.(RelativePanel.Below)" Value="RedRect" />
<!--<Setter Target="GreenRect.(RelativePanel.AlignVerticalCenterWith)" Value="BlueRect" />-->
<!--<Setter Target="GreenRect.(RelativePanel.AlignTopWith)" Value="BlueRect" />-->
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel>
<Rectangle x:Name="RedRect"
Width="100"
Height="100"
Fill="Red" />
<Rectangle x:Name="BlueRect"
Width="100"
Height="200"
Fill="Blue"
RelativePanel.Below="RedRect"
RelativePanel.RightOf="RedRect" />
<Rectangle x:Name="GreenRect"
Width="100"
Height="100"
Fill="Green"
RelativePanel.Below="BlueRect"
RelativePanel.RightOf="RedRect" />
</RelativePanel>
</Grid>
It works like:

You can do
<Setter Target="SomeElement.(RelativePanel.Below)" Value="{x:Null}" />

How to disable the scrollview in LongListSelector in windows phone 7

I want to disable the scrollview in LongListSelector.
I tried like this:
<toolkit:LongListSelector x:Name="List_Contacts"
IsFlatList= "False"
DisplayAllGroups="False"
Margin="0,0,0,100"
Width="480"
Background="Transparent"
ItemsSource="{Binding ResultList}"
ItemTemplate="{StaticResource ItemTemplate}"
GroupHeaderTemplate="{StaticResource GroupItemHeaderTemplate}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Tap="List_Contacts_Tap"/>
But here the scrolling not disabled.
I found one solution from stack overflow
<Style x:Key="LongListSelectorWithNoScrollBarStyle" TargetType="toolkit:LongListSelector">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:LongListSelector">
<Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling" />
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<ViewportControl x:Name="ViewportControl"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Top"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But here i am getting error
The type 'ViewportControl' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.
I have include the namespace into the xaml also.
xmlns:ViewportControl="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows"
But still now i am getting the 'ViewportControl' was not found error.
Please help me to disable the scroll in LLS.
Here All the elements are scroll able.. LLS will have N number of items. If I scroll the LLS to top the above stack panel also should scroll to top.

You can disable scroll by setting the height of LongListSelector(LLS) more than the height of all your Items. You can set a maximum height to your LLS to avoid scrolling.
Having a LLS inside a ScrollViewer is not a good practice, both the scrolls will fight for their input events and result will not be as expected.
Also, to be more focused about your issue, You can add your StackPanels to the ListHeader of LLS, so that the StackPanels will also scroll along with your Items when you scroll your LLS.
A Sample structure to make use of ListHeader of LLS is,
<phone:LongListSelector>
<phone:LongListSelector.ListHeader>
<StackPanel>
<StackPanel Name="Panel1"></StackPanel>
<StackPanel Name="Panel2"></StackPanel>
</StackPanel>
</phone:LongListSelector.ListHeader>
</phone:LongListSelector>

Simple way to change appearance of a TextBlock on hover?

I'm making a zoom control (Slider) with a TextBlock indicator that tells you want the current scale factor is (kinda like in the bottom-right corner of Word).
I'm a couple days into learning WPF, and I've been able to figure out how to do most of it, but I get the sense there's a much simpler way (one which, perhaps, only involves XAML-side code rather than a bunch of mouse events being captures.
I'd like for a the text to be underlined when hovered over (to imply clickability) and for a click to reset the slider element to 1.0.
Here's what I have:
<StatusBarItem Grid.Column="1" HorizontalAlignment="Right">
<Slider x:Name="mapCanvasScaleSlider" Width="150" Value="1" Orientation="Horizontal" HorizontalAlignment="Left"
IsSnapToTickEnabled="True" Minimum="0.25" Maximum="4" TickPlacement="BottomRight"
Ticks="0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4"/>
</StatusBarItem>
<StatusBarItem Grid.Column="2">
<TextBlock Name="zoomIndicator" Text="{Binding ElementName=mapCanvasScaleSlider,Path=Value,StringFormat=0%}"
MouseDown="ResetZoomWindow" MouseEnter="zoomIndicator_MouseEnter" MouseLeave="zoomIndicator_MouseLeave"
ToolTip="Zoom level; click to reset"/>
</StatusBarItem>
private void ResetZoomWindow(object sender, MouseButtonEventArgs args)
{
mapCanvasScaleSlider.Value = 1.0;
}
private void zoomIndicator_MouseLeave(object sender, MouseEventArgs e)
{
zoomIndicator.TextDecorations = TextDecorations.Underline;
}
private void zoomIndicator_MouseLeave(object sender, MouseEventArgs e)
{
zoomIndicator.TextDecorations = null;
}
I feel as though there's a better way to do this through XAML rather than to have three separate .cs-side functions.

You could use a style trigger for the text block, like described in this other post How to set MouseOver event/trigger for border in XAML?
Working solution:
<StatusBarItem Grid.Column="2">
<TextBlock Name="zoomIndicator" Text="{Binding ElementName=mapCanvasScaleSlider,Path=Value,StringFormat=0%}"
MouseDown="ResetZoomWindow" ToolTip="Zoom level; click to reset">
<TextBlock.Style>
<Style>
<Setter Property="TextBlock.TextDecorations" Value="" />
<Style.Triggers>
<Trigger Property="TextBlock.IsMouseOver" Value="True">
<Setter Property="TextBlock.TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StatusBarItem>
Still have to reset the zoom level manually (I think), though.

You can use VisualState (if you're using Blend its easy to edit).
Personally I prefer style triggers, unless I have to add StoryBoard animation - then I offen use VisualState
about VisualState

Typically, you wouldn't want to use a TextBlock as a button (although of course you can). You may want to consider using a more appropriate control like Button or HyperlinkButton, which have the basic mouse event handling already wired up. You can then apply whatever styles you like. A Button control, for example, can be easily styled re-templated as a TextBlock with underline on mouse-over:
<Style TargetType="Button" x:Key="LinkButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard Duration="0:0:0.1">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="content" Storyboard.TargetProperty="TextDecorations">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TextDecorationCollection>Underline</TextDecorationCollection>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="content" Text="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use it by referencing the style key:
<Button Content="click" Style="{StaticResource LinkButtonStyle}" />
Using this approach (rather than the alternative of adding triggers to a TextBlock) brings some advantages, which are built in to the Button control.
You can apply styles to compound states like Pressed
You can use the Click event, and its related Command property

Creating tabs in WinRT

I'm working on a C#/XAML Metro style app for Windows 8. The XAML in WinRT does not have a "tab" control. However, I'm trying to emulate the way a result in the Windows 8 store looks. For instance, this image shows "Overview", "Details", and "Reviews" tabs:
How do I create these?
A RadioButton seems to make sense. I figured I could use the GroupName to ensure only one item is selected. But if I use a RadioButton, I don't know how to make the selected item look dark gray while makig the other options light gray. Can someone show me the XAML of a RadioButton that does not show the little checked thingy? And also is dark gray when selected and light gray when not selected.
Thank you so much!

Here is the style to use for radio buttons to make them look/work like tabs:
<!-- Style for radio buttons used as tab control -->
<Style x:Key="TabRadioButtonStyle" TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked">
<Storyboard>
<ColorAnimation Duration="0" To="Gray" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" />
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" />
</Storyboard>
</VisualState>
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="TabButtonText" Text="{TemplateBinding Content}" Style="{StaticResource GroupHeaderTextStyle}" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can then define a grid to hold the tab stack panel and a frame to hold the content associated with each tab. Use Click event on the radio buttons to navigate the frame to the appropriate pages for each "tab".
<Grid Grid.Row="1"
Margin="120,0,56,56">
<!-- Row 1 to hold the "Tabs", Row 2 to hold the content -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<RadioButton x:Name="Tab1" Content="Tab1" Style="{StaticResource TabRadioButtonStyle}" IsChecked="True" Click="Tab1_Clicked" />
<RadioButton x:Name="Tab2" Content="Tab2" Style="{StaticResource TabRadioButtonStyle}" IsChecked="False" Click="Tab2_Clicked" Margin="30,0,0,0" />
<RadioButton x:Name="Tab3" Content="Tab3" Style="{StaticResource TabRadioButtonStyle}" IsChecked="False" Click="Tab3_Clicked" Margin="30,0,0,0"/>
</StackPanel>
<Frame x:Name="ContentFrame" Margin="0,20,0,0" Grid.Row="1" Background="{StaticResource SandstormBackgroundBrush}" Loaded="ContentFrame_Loaded" />
</Grid>

Styling a ListBox is preferable to styling a radio button group.
The following code uses a ListBox with a horizontal stack panel to create the tab item header. A ContentControl displays the tab content as a user control.
I've only tested this with WPF, but hopefully it will work on WinRT.
<Page.Resources>
<Style TargetType="ListBoxItem">
<!-- disable default selection highlight -->
<!-- Style.Resources is not supported in WinRT -->
<!--<Style.Resources>
--><!-- SelectedItem with focus --><!--
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent" />
--><!-- SelectedItem without focus --><!--
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="Transparent" />
</Style.Resources>-->
<!--Setter Property="FocusVisualStyle" is not supported in WinRT -->
<!--<Setter Property="FocusVisualStyle" Value="{x:Null}" />-->
</Style>
<Style x:Key="TitleStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="LightGray"/>
<!--Style.Triggers is not supported in WinRT-->
<!--<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding Path=IsSelected,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ListBoxItem}}}">
<Setter Property="Foreground" Value="DarkGray"/>
<Setter Property="FontWeight" Value="Bold"/>
</DataTrigger>
</Style.Triggers>-->
</Style>
</Page.Resources>
<Grid>
<Grid.DataContext>
<ViewModel:TestPage/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ListBox x:Name="tabListBox" Grid.Row="0" ItemsSource="{Binding Items}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
BorderBrush="{x:Null}" BorderThickness="0">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Margin="5"
Style="{StaticResource TitleStyle}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ContentControl Grid.Row="1" Content="{Binding SelectedItem.Content}"/>
</Grid>
View model
public class MyTabViewModel : INotifyPropertyChanged
{
public MyTabViewModel()
{
Items =
new List<MyTabItem>
{
new MyTabItem
{
Title = "Overview",
Content = new UserControl1()
},
new MyTabItem
{
Title = "Detail",
Content = new UserControl2()
},
new MyTabItem
{
Title = "Reviews",
Content = new UserControl3()
},
};
}
public IEnumerable<MyTabItem> Items { get; private set; }
private MyTabItem _selectedItem;
public MyTabItem SelectedItem
{
get { return _selectedItem; }
set
{
_selectedItem = value;
PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem"));
}
}
#region Implementation of INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
public class MyTabItem
{
public string Title { get; set; }
public UserControl Content { get; set; }
}

The FlipView control might meet your needs. Sample.

I used FlipView control as well, but I created a separate templated control which is inherited from FlipView.
The main idea is to override default FlipView ControlTemplate: I added a ListBox which represents tab headers and removed "Next" and "Previous" FlipView buttons.
I can share source code if you need more details about my implementation.