I am developing windows phone app not silverlight just basic app.
Is there any way to make the buttons of my app look like tile. That means I want tiles for my buttons inside the pages.
I want to do something like this
but I am getting error like "the default namespace is not defined" in the line marked when i put this code on my page.
*<Style x:Key="TileListBoxItemStyle" TargetType="ListBoxItem">*
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="FontSize" Value="64"/>
<Setter Property="Margin" Value="12,12,0,0"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="173"/>
<Setter Property="Height" Value="173"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On the link that you have provided, the BBC app are using HubTiles and attaching onClick event Handlers to make them seem as buttons.
Please use HubTile from telerik or something and you will achieve the SAME SAME result as that of BBC app
Related
Currently I have a problem when I apply a style to an Entry it only opens on the second click. This only occurs when the applied Style uses the Visual State Manager with the VisualState Focused. If I remove the VisualState "Focused" the problem is solved.
Used style Code:
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="{StaticResource Color_Text_OnWhite}" />
<Setter Property="FontAttributes" Value="None"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{StaticResource Color_Text_OnWhite_Disabled}" />
<Setter Property="FontAttributes" Value="None"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Focused">
<VisualState.Setters>
<Setter Property="TextColor" Value="{StaticResource Color_Text_OnWhite}" />
<Setter Property="FontAttributes" Value="Bold"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="TextColor" Value="{StaticResource Color_Text_OnWhite}" />
<Setter Property="FontAttributes" Value="Bold"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
Here is the Video to show the problem: https://vimeo.com/588825086
Is there a workaround available?
This issue is caused by the FontAttributes. Delete the code below would be okay.
<Setter Property="FontAttributes" Value="Bold"/>
The seetings of the Font like FontSize, FontAttributes with VisualState would make the Keyboard does not appear unless you tap twice.
The issue of FontSize is reported and has not solved yet. I would reported this FontAttributes as well. https://github.com/xamarin/Xamarin.Forms/issues/4573
I have the need to replace at runtime an implicit style that is located in a merged resource dictionary
for example lets suppose I have
<Style TargetType="Label">
<Setter Property="FontSize" Value="14" />
</Style>
Now I want to replace the all style with something else at runtime. Can this be done?
Above is just a sample.. Nothing todo with theming or anything else, I have the need to replace the all implicit style at runtime.
Can I detect based on TargetType ?
thanks
If I understand your problem correctly, I think that data triggers might help you. For example, you can change FontSize with something like this:
<Style x:Key="labelStyle" TargetType="Label">
<Setter Property="FontSize" Value="14" />
<Style.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding isSmallDevice}" Value="True">
<Setter Property="FontSize" Value="10" />
</DataTrigger>
</Style.Triggers>
</Style>
Actually in this occasion I need to change some fontsizes at runtime based on whether is a small device or not
You can use OnIdiom markup extension to detect Phone or Table or desktop.
<Label Text="Welcome to Xamarin.Forms!">
<Label.Style>
<Style TargetType="Label">
<Setter Property="FontSize">
<Setter.Value>
<OnIdiom
x:TypeArguments="x:Double"
Phone="18"
Tablet="50" />
</Setter.Value>
</Setter>
</Style>
</Label.Style>
</Label>
In UWP, if I want to specify a default style for a custom control, I'd code it up like this:
public PriceControl()
{
// This allows the control to pick up a template.
this.DefaultStyleKey = typeof(PriceControl);
}
I can't find the equivalent in Xamarin.Forms. How do you tell a custom control that it should use a style by default?
Just define a style in App.Xaml of the typeof your control and don't give it a key just a target type and that should do the trick:
<Application.Resources>
<ResourceDictionary>
<Style TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="BorderRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
</ResourceDictionary>
</Application.Resources>
Just replace button with your control and it's properties Into the setter's and this will be your global default style for this control!
In one of my Xamarin.Forms apps I want to change the text color of a DatePicker according to the IsEnabled property.
I tried two known ways:
1) Using a style
In App.xaml:
<Style x:Key="DatePickerStyle" TargetType="DatePicker">
<Style.Triggers>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="True">
<Setter Property="TextColor" Value="Blue" />
</Trigger>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="False">
<Setter Property="TextColor" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
In View.xaml:
<DatePicker IsEnabled="{Binding IsEnabled}" Style="{StaticResource DatePickerStyle}" ... />
2) Adding the trigger in XAML
<ViewCell>
<DatePicker IsEnabled="{Binding IsEnabled}" ...>
<DatePicker.Triggers>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="True">
<Setter Property="TextColor" Value="Blue" />
</Trigger>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="False">
<Setter Property="TextColor" Value="Red" />
</Trigger>
</DatePicker.Triggers>
</DatePicker>
</ViewCell>
Both ways lead to a "System.InvalidOperationException: bindable not an instance of AssociatedType" exception.
Is it possible to change the text color of a picker with an applied style that contains a trigger at the IsEnabled property? Will a behavior be a better way to go?
I faced a similar issue with DatePicker and found no explanation on Xamarin forums or msdn. I have finally used the following workaround and it works
<Style TargetType="DatePicker">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList x:Name="CommonStates">
<VisualStateGroup>
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
See also Visual State Manager.
I have created a Xamarin.Forms application and it has quite a long name.
When I start it on my 4.5" Windows 10 phone, it looks very strange.
The main page consists of a TabbedPage and it has the Title property, however it has no FontSizeproperty.
I use the following Style in my PCL project:
<Style TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BaseColor}" />
<Setter Property="FontSize">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="18"
Tablet="28" />
</Setter.Value>
</Setter>
</Style>
However, if I remove it, the title is still very large.
Where can I modify the title font size to make the title smaller?
UPDATE:
I checked with the Live Property Editor, and it shows that the Title is inside the CommandBar and the FontSize is set to 24.
I tried to override its style (both in XAML and in code), but it doesn't work:
<forms:WindowsPage.BottomAppBar>
<CommandBar>
<CommandBar.Style>
<Style TargetType="CommandBar">
<Setter Property="FontSize" Value="4" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock Text="Whatever" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</CommandBar.Style>
<CommandBar.Content>
<TextBlock Text="Whatever" />
</CommandBar.Content>
</CommandBar>
</forms:WindowsPage.BottomAppBar>
public MainPage()
{
this.InitializeComponent();
var bapp = BottomAppBar;
LoadApplication(new MyXamarinApp.App(IoC.Get<SimpleContainer>()));
BottomAppBar = bapp;
BottomAppBar.FontSize = 4;
}
Any idea?
UPDATE 2:
You can download a sample project from here.
You have to override one of the built-in styles:
<!-- Tab title -->
<Style x:Key="TitleTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="18" />
<Setter Property="TextWrapping" Value="NoWrap" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
</Style>