I am using Command Bar in windows phone using below code
<Page.BottomAppBar>
<CommandBar Foreground="White">
<CommandBar.PrimaryCommands>
<AppBarButton x:Uid="Share">
<AppBarButton.Icon>
<BitmapIcon UriSource="/Assets/Share.png"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Icon="Favorite"></AppBarButton>
<AppBarButton Icon="Comment"></AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
I am getting a footer icon like below with out any background. Simply the icon image is showing.
But i need a footer icon like this with some rounded background for each icon with foreground white
Please guide me to achieve the expected
Try to follow below:
1) Open the page in Blend which you want to modify. Click on the actual Control and Right Click.
2) From the popup window choose Create new template and Define In as Application
3) It creates a copy of Default Template in App.xaml. Now Look For tag ContentPresenter before the end of style. It will be wrapped in StackPanel with Name ContentRoot. Wrap it with a Border.
<Border BorderBrush="{TemplateBinding Foreground}" CornerRadius="50" BorderThickness="2" Margin="10,0">
Finally It should be like below.
<Border BorderBrush="{TemplateBinding Foreground}" CornerRadius="50" BorderThickness="2" Margin="10,0">
<StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}">
<ContentPresenter x:Name="Content" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center" Height="20" Width="20" Margin="0,12,0,4"/>
<TextBlock x:Name="TextLabel" Foreground="{TemplateBinding Foreground}" FontSize="12" FontFamily="{TemplateBinding FontFamily}" Margin="0,0,0,6" TextAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Label}"/>
</StackPanel>
</Border>
Now go back to your page and set the style to this style key. Like Below.
<AppBarButton Icon="Favorite" Style="{StaticResource AppBarButtonStyle1}" ></AppBarButton>
This is Beauty of Blend. Not just this control, you can modify any control that has Style Template.
Good Luck.
Related
I am creating a Windows 10 universal App and I Have successfully created shell.xaml but I don't wanna use radioButton instead of that I have used a button and TextBlock.
I want to know how to make the TextBlock and Button a Single clickable entity through listView Item.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="mySplitView" DisplayMode="CompactInline" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="150" Content="{Binding}">
<SplitView.Pane>
<StackPanel Background="{ThemeResource SystemControlBackgroundAccentBrush}">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Foreground="White" Click="HamburgerButton_Click" />
<StackPanel Orientation="Horizontal">
<Button FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Foreground="White">
<TextBlock Foreground="White" FontSize="10" VerticalAlignment="Center" />
</StackPanel>
From what I understand you want to make an event fire whenever you press somewhere inside the StackPanel that contains the Button and TextBlock.
One solution would be to simply put your Button and TextBlock inside a ListView item.
Like this (I include all the xaml for the SplitView.Pane to make it a bit more clear):
<SplitView.Pane>
<StackPanel Background="{ThemeResource SystemControlBackgroundAccentBrush}">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Foreground="White" Click="HamburgerButton_Click" />
<ListView>
<ListView.Items>
<ListViewItem Padding="0" Tapped="ListViewItem_Tapped">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="50">
<Button FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" Foreground="White" />
<TextBlock Foreground="White" FontSize="10" Text="Wop wop!" VerticalAlignment="Center" />
</StackPanel>
</ListViewItem>
</ListView.Items>
</ListView>
</StackPanel>
</SplitView.Pane>
In this example only the '%' is shown when the pane is closed and the '%' plus the text "Wop wop!" when it's open. Whenever the content of this ListViewItem (the buton or TextBlock) is pressed, the method "ListViewItem_Tapped" will fire.
If I in any way misunderstood your question or you need any more info about my answer please let me know.
Have a wonderful day!
PS. The button still "acts" like a button, by showing it's own border, visual states and so on. I don't know from the top of my head how to disable this. But you could perhaps try disabling it or using another textblock instead? .DS
Is there a way to customize the styling of the Callisto Custom Dialog other than the background? I want to change the font size and color of the title property of the Custom Dialog. Any suggestions without messing with the base style?
Reference: https://github.com/timheuer/callisto/wiki/CustomDialog
The CustomDialog's template calculates it's title's Foreground to a colour which contrasts with the Background and sets the FontSize to 26.6667:
<StackPanel Margin="13,19,13,25" HorizontalAlignment="Center" Width="{TemplateBinding Width}" MaxWidth="680">
<local:DynamicTextBlock Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="26.6667" FontWeight="Light" Margin="0,0,0,8" />
<ContentPresenter Margin="0" x:Name="PART_Content" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" />
</StackPanel>
If you want to change these you'll need to retemplate the dialog. You can copy the template from Callisto's generic.xaml and then replace the Foreground and FontSize properties. You may want to use a TemplateBinding so you can set them on the CustomDialog when you call it:
<StackPanel Margin="9,5" HorizontalAlignment="Center" Width="{TemplateBinding Width}" MaxWidth="680">
<callisto:DynamicTextBlock Foreground="{TemplateBinding Foreground}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="{TemplateBinding FontSize}" FontWeight="Light" Margin="0,0,0,8" />
<ContentPresenter Margin="0" x:Name="PART_Content" Foreground="{TemplateBinding Foreground}" />
</StackPanel>
Then set them to your own resources:
<callisto:CustomDialog Background="{ThemeResource MyCustomDialogBackground}" Foreground="{ThemeResource MyCustomDialogForeground}" Title="Lorem ipsum" Template="{StaticResource CustomDialogControlTemplate1}"></callisto:CustomDialog>
<ContentControl Width="120">
<ContentControl.Content>
<ContentControl>
<ContentControl.ContentTemplate>
<DataTemplate>
<TextBlock Text="ABC" TextAlignment="Right" HorizontalAlignment="Right"/>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</ContentControl.Content>
Please find the above code.
It's not getting right aligned.
It is working, but ContentControl by default aligns it's content to the left with just enough place to show.
You can just set HorizontalContentAlignment to Right in ContentControl, so child don't have to worry about it:
<ContentControl Width="120" HorizontalContentAlignment="Right">
<TextBlock Text="ABC" />
</ContentControl>
Or you can set HorizontalContentAlignment to Stretch and leave the rest for child to figure out:
<ContentControl Width="120" HorizontalContentAlignment="Stretch">
<TextBlock Text="ABC" HorizontalAlignment="Right" />
</ContentControl>
I'm developing a Panorama App for Windows Phone 8 and I got a small problem. I added an image to the header of one of my Panorama.Item (and it shows up fine) but I'd love it to be centered and not aligned left. I don't even know if it's possible or if you can't change the alignment at all. Here's the code for the header I'm talking about:
<phone:PanoramaItem.Header>
<Image x:Name="Logo" Height="100" HorizontalAlignment="Center" Tap="Logo_Tap" />
</phone:PanoramaItem.Header>
The HorizontalAlignment="Center"-Property unfortunately doesn't seem to do it. Any help would be appreciated.
I would avoid using a hard coded width. The proper way to do this would be to override the Template on the PanoramaItem, like this (They key part being changing the HorizontalAlignment on the header ContentControl)
<ControlTemplate x:Key="CenteredHeaderPanoramaItemTemplate" TargetType="phone:PanoramaItem">
<Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl x:Name="header" CharacterSpacing="-35" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontSize="66" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Margin="12,-2,0,38" HorizontalAlignment="Stretch">
<ContentControl.RenderTransform>
<TranslateTransform x:Name="headerTransform"/>
</ContentControl.RenderTransform>
</ContentControl>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
Then just assign the Template using a StaticResource
<phone:PanoramaItem Template="{StaticResource CenteredHeaderPanoramaItemTemplate}">
<phone:PanoramaItem.Header>
<Image x:Name="Logo" Height="100" HorizontalAlignment="Center" Tap="Logo_Tap" />
</phone:PanoramaItem.Header>
<Grid x:Name="PanoramaItemContent">
</Grid>
</phone:PanoramaItem>
The simplest way is:
<phone:PanoramaItem.Header>
<Grid Width="432">
<Image x:Name="Logo"
Height="100"
HorizontalAlignment="Center"
Tap="Logo_Tap" />
</Grid>
</phone:PanoramaItem.Header>
<phone:PanoramaItem.Header>
<Grid HorizontalAlignment="Center">
<Image x:Name="Logo" Height="100" Tap="Logo_Tap" />
</Grid>
</phone:PanoramaItem.Header>
try this
I have a LongListSelector control on a page in my Windows Phone 8 app. For this control I set a GroupHeaderTemplate and a ItemTemplate and both contain a TextBlock. If I align the TextBlock controls to center I have some weird behavior (maybe not weird but unexplainable to me at the moment). When I open the page on my phone the centered text moves ca. 5px to the right. The move is visible to the user (it's happening after the page is loaded). I tried to solve this problem but all margin changes (and other trials) did not change the behavior and my friend Google couldn't help me either. Can some explain to my why this is happening and how to solve this?
My code (simplified):
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<phone:LongListSelector x:Name="longList" LayoutMode="List" HideEmptyGroups ="true" Margin="5,0,5,5" ItemsSource="{Binding List, Mode=OneWay}" IsGroupingEnabled="True" Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<phone:LongListSelector.Resources>
<DataTemplate x:Key="itemTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Left">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="{Binding Name}" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="groupHeaderTemplate">
<Grid Margin="10,10,10,0" Background="#FFF3F1F1" HorizontalAlignment="Center">
<TextBlock x:Name="name" Margin="10" TextWrapping="NoWrap" Text="test" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.Resources>
<!--<phone:LongListSelector.JumpListStyle>
<StaticResource ResourceKey="jumpListStyle"/>
</phone:LongListSelector.JumpListStyle>-->
<phone:LongListSelector.GroupHeaderTemplate>
<StaticResource ResourceKey="groupHeaderTemplate"/>
</phone:LongListSelector.GroupHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<StaticResource ResourceKey="itemTemplate"/>
</phone:LongListSelector.ItemTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectItemCommand}"
CommandParameter="{Binding SelectedItem, ElementName=longList}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</phone:LongListSelector>
</Grid>
Thanks in advance