I am trying to center the pivot header in my universal 10 app,my code is this:
<Pivot>
<PivotItem x:Name="pivot0" Margin="0">
<PivotItem.Header >
<Image x:Name="headerimg" Source="images/1.png" PointerExited="pointerExited" Height="40" Stretch="Uniform" PointerMoved="headerimg_PointerMoved" />
</PivotItem.Header>
<Grid >
</Grid>
</PivotItem>
<PivotItem>
<PivotItem.Header>
<Image x:Name="headerimg1" Source="images/2.png" Height="40" Stretch="Uniform" PointerExited="headerimg1_PointerExited" PointerMoved="headerimg1_PointerMoved" />
</PivotItem.Header>
<Grid>
<TextBlock Text="test3"></TextBlock>
</Grid>
</PivotItem>
</Pivot>
I have an idea to use a header template,but I don't know how can I center the pivot header,
thanks for help
Take a look at a complete example on how to do this here: https://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/
Import parts are
Setting the HorizontalContentAllignment to get the centering > <Setter Target="HeaderClipper.HorizontalContentAlignment" Value="Center" />
Taking care of the incorrect default height of a pivot header! The default template has 48 set as height and that would not be enough in most cases!
Related
i have the following code in my xaml :
<ToggleButton x:Name="play" Command="{Binding OnPlayButton}" CommandParameter="{Binding ElementName=media , Mode=TwoWay}" HorizontalAlignment="Left" Margin="573,638,0,0" VerticalAlignment="Top" Height="50" Width="50">
<Image Name="MyImage" Source="Images/Control/Play.png"/>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Checked">
<core:ChangePropertyAction PropertyName="MyImage" Value="{Binding Source=Images/Control/Pause.png}" />
</core:EventTriggerBehavior>
<core:EventTriggerBehavior EventName="Unchecked">
<core:ChangePropertyAction PropertyName="MyImage" Value="{Binding Source=Images/Control/Play.png}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ToggleButton>
What i'm trying to achieve is change the background of the togglebutton to pause.png when its clicked and change it to play.png when clicked again. I'm getting exception in the xaml , is this the correct way ?
You are almost there with Behaviors. But PropertyName is Not Image It is Source. And TargetObject is MyImage
Your code should be something like below.
<ToggleButton HorizontalAlignment="Center" VerticalAlignment="Center" IsChecked="True">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=MyImage}" PropertyName="Source" Value="Images/Control/Pause.png" />
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="Unchecked">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=MyImage}" PropertyName="Source" Value="Images/Control/Play.png"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Image x:Name="MyImage" Source="Images/Control/Play.png" Width="100" Height="100"/>
</ToggleButton>
Good Luck.
You can't use PropertyName="MyImage" as "MyImage" is the name of a control, not a property of ToggleButton!
The easiest way to do what you want is to add the two images one after the other and change visibility according to the control state:
<ToggleButton x:Name="play">
<Image Source="Images/Control/Play.png" Visibility="{Binding IsChecked, ElementName=play, Converter={StaticResource BooleanToVisibilityConverter}" />
<Image Source="Images/Control/Stop.png" Visibility="{Binding IsChecked, ElementName=play, Converter={StaticResource InverterBooleanToVisibilityConverter}" />
</ToggleButton>
On the example above I'm using two converter instances for something that converts a bool value to a Visibility value. You can write your own or just use a 3rd party one like the BooleanToVisibilityConverter from Cimbalino Toolkit.
I'm writing a UWP app and have several areas where searches are performed and results are rendered in a ListView where the ItemTemplate is defined inside a DataTemplate. Nothing fancy is going on here - just returns a list of items in a single "column", if you will.
There are three supported screen states (or widths), 320, 640, and 1024. I'd like to render these search results in two "columns" when the screen state is 640 or 1024 (wide states).
I'd like to use adaptive triggers for this task, but I'm at a loss of how to do this intelligently. There are examples of creating different views for each device family, but they seem too dependent on checking the device family. Best practices dictate using screen width thresholds instead. Either way, it seems this could easily be accomplished using adaptive triggers.
Any insight or examples of where this is done would be appreciated. The code is included to provide more context and to act as my starting point.
<Page.Resources>
<ResourceDictionary>
<Style x:Key="TextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource LargeTextBlockStyle}">
<Setter Property="Foreground" Value="{StaticResource TitleBrush}" />
</Style>
<DataTemplate x:Key="SearchResult">
<StackPanel Width="{Binding ActualWidth, ElementName=Parent}">
<Border Background="Gray" MinWidth="235">
<Grid Height="155">
<Image Source="{Binding SearchResultImage}"
Style="{StaticResource ImageStyle}" />
<Rectangle Fill="{StaticResource BackgroundBrush}" />
<StackPanel Margin="10,10,15,10" VerticalAlignment="Center">
<TextBlock Text="{Binding SearchResultName}"
Style="{StaticResource TextBlockStyle}"
VerticalAlignment="Center" />
</StackPanel>
</Grid>
</Border>
<Button Style="{StaticResource ButtonStyle}"
Command="{Binding ViewRecipeCommand, Source={StaticResource Locator}}"
CommandParameter="{Binding}">
<StackPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Center">
<SymbolIcon Symbol="Calendar" Margin="0,0,10,0" />
<TextBlock x:Uid="ViewRecipeCommandTextBlock"
Text="View Recipe"
Style="{StaticResource TextBlockStyle}" />
</StackPanel>
</Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="HeaderStackPanel" Grid.Row="0" Margin="10">
<TextBlock x:Uid="RecipesTitle" Text="All Recipes"
Style="{StaticResource TextBlockStyle}"
Margin="0,0,0,10" />
</StackPanel>
<ListView x:Name="ResultsListView" Grid.Row="2"
ItemsSource="{Binding AllRecipes}"
ItemTemplate="{StaticResource SearchResult}" />
</Grid>
What I'd do to use a GridView instead a ListView, and change the GridView's ItemsPanel based on the width changes.
By using a GridView with an item width as wide as the screen size (320) you can get it to behave like a ListView, and if the GridView get's wider the content will automatically produce two columns for you. The only thing not to forget is to change the default scrolling direction of the ItemsPanel from horizontal to vertical.
I need to set the menuflyout to get right aligned. I used the code, but it appears at left only. Should I need to modify in the style?
<Button Content="Click" HorizontalAlignment="Right" Height="30" Width="30">
<Button.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyout.MenuFlyoutPresenterStyle>
<Style TargetType="MenuFlyoutPresenter">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="MaxWidth" Value="50" />
<Setter Property="MaxHeight" Value="50" />
</Style>
</MenuFlyout.MenuFlyoutPresenterStyle>
<MenuFlyoutItem Text="Item" />
</MenuFlyout>
</Button.Flyout>
</Button>
From the screenshot, it seems you are develpoing a Windows Phone 8.1 app not a UWP app.
While using UWP, your code (I remove Height and Width in the Button) looks like:
I think this is what you want.
But in Windows Phone 8.1, we have to modify the template of MenuFlyoutPresenter to achieve this.
To modify the template of MenuFlyoutPresenter, we can select the "[MenuFlyout]" in "Document Outline" and right click, then select "Edit Additional Templates" → "Edit MenuFlyoutPresenterStyle" → "Edit a Copy...".
In the template, we need to set the HorizontalAlignment of OuterBorder, CenterBorder and InnerBorder to Right:
<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right">
...
<Border x:Name="CenterBorder" BorderBrush="{TemplateBinding Background}" FlowDirection="LeftToRight" HorizontalAlignment="Right">
<StackPanel x:Name="InnerBorder" Background="{TemplateBinding Background}" FlowDirection="{TemplateBinding FlowDirection}" HorizontalAlignment="Right">
...
</StackPanel>
</Border>
</Border>
Then in the Button, we can use code like following:
<Button HorizontalAlignment="Right" Content="Click">
<Button.Flyout>
<MenuFlyout MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle1}" Placement="Bottom">
<MenuFlyoutItem Text="Item" />
</MenuFlyout>
</Button.Flyout>
</Button>
It looks like:
You can also change other properties in the Style of MenuFlyoutPresenter to beautify it.
Actually if you use default settings and set your Placement property of MenuFlyout, position should look fine. When I modify your code it should work properly as what you need. Yıu can check from screenshot.
<Button Content="Click" HorizontalAlignment="Right" Height="30" Width="114" Margin="0,200,0,0" VerticalAlignment="Top" >
<Button.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyoutItem Text="Item" HorizontalAlignment="Right" />
</MenuFlyout>
</Button.Flyout>
</Button>
I am developing a universal application in Visual Studio 2015 Community, but I have a problem in stretching my 3 buttons when I test my application on local PC or the Windows phone emulator, this is what I get with my code:
<CommandBar Height="51" >
<CommandBar.Content>
<Grid>
<StackPanel>
<Image x:Name="image1" Margin="41,10,-168,-50" Source="images/name.png" RenderTransformOrigin="0.487,0.82"/>
<Image x:Name="image" Margin="1,0,-40,-50" Source="images/icon.png"/>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-244,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Button.Content>
<Image Source="images/home.png" Margin="-9,0.333,-9,-0.667"/>
</Button.Content>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-280,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/search.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-315,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/profil.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
</Grid>
</CommandBar.Content>
This what I want to get:
This is going to get you there:
<!--Content Alignment is left by default!-->
<CommandBar HorizontalContentAlignment="Stretch">
<CommandBar.Content>
<Grid>
<!--Left element-->
<Rectangle Margin="10" Height="35" Width="35" Fill="Red"
HorizontalAlignment="Left"/>
<!--Right elements together in a horizontal StackPanel-->
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right">
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
</StackPanel>
</Grid>
</CommandBar.Content>
</CommandBar>
First up, you tagged your question inside several different area's, so it's difficult for us to tell what platform you are on. Is it a WinRT 8.1 app or a UWP windows 10 app?
But for reference, if it's a UWP Win10 app, first try to use following XAML, it creates a CommandBar with 1 primary command. And on the UWP platform that will position the icon at the right of the screen.
<CommandBar IsOpen="True" IsSticky="True">
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Add" />
</CommandBar.PrimaryCommands>
</CommandBar>
More info on what and how items are displayed inside a commandbar can be found on MSDN here https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.commandbar.aspx
There are a few issues with what you're trying.
The XAML you have is more complicated than it needs to be.
You've tried to align controls by setting margins - this doesn't work with
variable sized containers.
You're not using any of the functionality of the CommandBar so you probably don't need it.
Instead you can make the layout you desire with a simple grid.:
<Grid VerticalAlignment="Top" Height="51">
<StackPanel HorizontalAlignment="Left">
<Image x:Name="image1" Source="images/name.png" />
<Image x:Name="image" Source="images/icon.png"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button >
<Image Source="images/home.png" />
</Button>
<Button>
<Image Source="images/search.png" />
</Button>
<Button >
<Image Source="images/profil.png" />
</Button>
</StackPanel>
</Grid>
I need to reduce the header text item1 in pivot page. But, i dunno how to do. Is there anyway to reduce this font size ?
XAML Code;
<phone:PivotItem Header="item1">
<Grid/>
</phone:PivotItem>
You can change HeaderTemplate. Smth like this:
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding}" FontSize="40" />
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
You cannot change the font size in PivotItem. Instead you can create a Template where you can add a TextBlock and consider it as a header. Please find the sample here.
<controls:Pivot Title="whatever" Name="pivot">
<controls:PivotItem Margin="11,28,13,0" >
<controls:PivotItem.Header>
<Grid>
<TextBlock Name="FirstPivot" FontSize="31" Text="FirstPivot" />
</Grid>
</controls:PivotItem.Header>
<Grid> <!-- content --> </Grid>
</controls:Pivot>
On Windows Phone 8 remember to change the 'controls' to 'phone'.
<phone:Pivot Title="whatever" Name="pivot">
<phone:PivotItem Margin="11,28,13,0" >
<phone:PivotItem.Header>
<Grid>
<TextBlock Name="FirstPivot" FontSize="31" Text="FirstPivot" />
</Grid>
</phone:PivotItem.Header>
<Grid> <!-- content --> </Grid>
</phone:Pivot>