How to style MessagePrompt from Code4Fun - styles

I am using the Message Prompt from the Code4fun toolkit for Windows Phone.
I have a problem styling the component. I have tried creating a general stye for it, and also tried changing the properties before displaying the component:
var messagePrompt = new MessagePrompt
{
Title = "UserControl test",
Body = new PopupView(),
IsAppBarVisible = true,
IsCancelVisible = true,
BorderThickness = new Thickness(0),
Margin = new Thickness(0),
Padding = new Thickness(0),
BorderBrush = new SolidColorBrush(Color.FromArgb(255, 0, 82, 161)),
Background = new SolidColorBrush(Color.FromArgb(255, 0, 82, 161))
};
messagePrompt.Show();
The Background is set with the correct color, but the BorderThickness, the Margin and the Padding settings are ignored!
I have tried google for some stying examples, but not with any luck!
So, how can I style the MessagePrompt component from coding4fun?

Here is template of MessagePrompt from Code4fun:
<Grid VerticalAlignment="Stretch">
<Rectangle Fill="{StaticResource TransparentBrush}" />
<Border VerticalAlignment="Top"
Margin="10" // because this line you can't change margin
Background="{TemplateBinding Background}"
BorderThickness="1" // because this line you can't change BorderThickness
BorderBrush="{StaticResource PhoneForegroundBrush}">
<StackPanel Margin="10">
<TextBlock Text="{TemplateBinding Title}"
Margin="0,-10,-25,10" FontSize="30"
TextWrapping="Wrap" FontFamily="Segoe WP Light" />
<ContentPresenter Content="{TemplateBinding Body}" />
<StackPanel Margin="0,10,0,0"
Name="actionButtonArea"
Orientation="Horizontal"
HorizontalAlignment="Center" />
</StackPanel>
</Border>
</Grid>
Padding ignored because this property not uses in template.
How you see, if you want to change this properties you have to change template of MessagePrompt.

Related

Xamarin: Scrolling to a position of a ListView when the listview is contained inside of a CarouselViewControl

Is there any way to directly access a listview that is contained within a CarouselViewControl?
I have a Carousel for the left and right swiping and inside each page, there is a listview. However, since the ListView is contained within the CarouselViewControl, I can't access it directly via code to call the ScrollTo() function nor is the ScrollTo function bindable. I've also tried looping through all of the rendered controls via a FindVisualChildren extension and it appears that when the Carousel renders, it doesn't render the listview as a listview so I don't see any way that I can scroll to a specific vertical position within it.
I'm trying to make an alphabet selector (similar to the one on android's music player) so that when the user clicks a letter, it takes them to that position in the listview. However, it also has to be inside of a carousel view so that it shows a different list when they swipe between the other pages.
Anyone have any ideas if there's any [other] way to do this?
<controls:CarouselViewControl x:Name="RecipeList" Orientation="Horizontal" InterPageSpacing="10" ItemsSource="{Binding ProductList}"
VerticalOptions="FillAndExpand" PositionSelected="RecipeList_PositionSelected"
HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<controls:CarouselViewControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ListView x:Name="sublist" Margin="5,10,-10,-10" ItemSelected="RecipeList_ItemSelected" IsGroupingEnabled="True"
GroupDisplayBinding="{Binding Key}" ItemsSource="{Binding ProductsList}" VerticalScrollBarVisibility="Never"
SeparatorVisibility="None" HasUnevenRows="True" BackgroundColor="Transparent" SelectedItem="{Binding ScrolledItem}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="1">
<Label Text="" />
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" MinimumHeightRequest="{StaticResource ImageSize}"
Padding="15,10,0,0">
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0" Margin="0,5,10,0" CornerRadius="10"
BackgroundColor="#FCFAF8" BorderColor="#F37623" HasShadow="True">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Image}" Grid.Column="0" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Aspect="AspectFit"/>
<Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Text="{Binding ProductNane}" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" FontAttributes="Bold" FontSize="Medium" TextColor="Black" BackgroundColor="Transparent" Margin="0,5,0,0"/>
<Image Source="{Binding HeartImage}" Grid.Row="0" Grid.Column="1" HorizontalOptions="End" VerticalOptions="StartAndExpand" BackgroundColor="Transparent" HeightRequest="30" WidthRequest="30" Aspect="AspectFit" Margin="0,5,10,1" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="HreatImageClicked"/>
</Image.GestureRecognizers>
</Image>
<Label Text="{Binding Description}" Grid.Row="1" Grid.Column="0" Style="{StaticResource StandardLabel}" FontSize="Small" MaxLines="2" LineBreakMode="TailTruncation" />
<lv:RatingImage Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" ImageDeselect="star_line.png" ImageSelect="yellow_star.png" ImageHeight="12" ImageWidth="12"
ItemsNumber="5" InitialValue="{Binding Rating}" HorizontalOptions="End" VerticalOptions="End"
SpaceBetween="2" IsReadOnly="True" Margin="0,0,2,0" />
</Grid>
</Grid>
</Frame>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="RecipeDetailPage" />
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</controls:CarouselViewControl.ItemTemplate>
</controls:CarouselViewControl>
Thanks!
I can't access it directly via code to call the ScrollTo() function nor is the ScrollTo function bindable.
You want to get ListView from CarouselViewControl DataTemplate, I think it is unreasonable, because it is just DataTemplate, I don't find any way to access control in DataTemplate.
So I suggest you can Create an ExtendedScrollView and expose the ScrollTo method into a read only bindable ICommand property. Bind it to your view model corresponding command and use it from there.
You can reuse the control everywhere and it can support any kind of scrolling scenario. You need to create an object to be used a the command parameter that will embed the parameters of ScrollTo, and use it inside the bindable ICommand inside ExtendedScrollView.

Xamarin Left margin in iPad

I face strange behavior when I am populate list view all cells have left margin
tested Device iPad 9 in simulator , iPad 12 in simulator
here is screen of my issue
and my second list
here is my Xaml
<customRender:ExtList x:Name="listViewFlights" BackgroundColor ="{StaticResource white_color}"
ItemTapped="ListView_OnItemTapped" SeparatorColor="Gray" SeparatorVisibility="Default"
MinimumHeightRequest="40" IsPullToRefreshEnabled="True" Refreshing="ListViewFlights_Refreshing" >
<ListView.ItemTemplate>
<DataTemplate>
<customRender:CustomViewCell >
<StackLayout Spacing="0" BackgroundColor="Aqua">
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="gridCell" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3.25*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
<ColumnDefinition Width="4.75*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstListColumn}" Style="{StaticResource GridItemStyleLabelStart_os}" Margin="10,0,0,0"/>
<StackLayout Grid.Row="0" Grid.Column="1" Padding="{Binding FlightListColumn2Padding}" VerticalOptions="Center" >
<Label Text="{Binding Dep_Dest}" Style="{StaticResource GridItemStyleLabel_os}" HorizontalTextAlignment="Start"></Label>
</StackLayout>
<Grid Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" RowSpacing="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.5*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition Width="5.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Frame Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsRecalculated}" Padding="0" Margin="0,7" OutlineColor="#5C768E" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HasShadow="False" BackgroundColor="Transparent">
<Label Text="R" Style="{StaticResource GridItemStyleLabelStart}" HorizontalOptions="CenterAndExpand" IsVisible ="{Binding IsRecalculated}" />
</Frame>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding ATCCtot }" Style="{StaticResource GridItemStyleLabelStart}" TextColor="Red" HorizontalOptions="Start" />
<Label Grid.Row="0" Grid.Column="2" Text="{Binding PreparedStd}" Style="{StaticResource GridItemStyleLabelEnd_os}" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="End" />
</Grid>
<BoxView x:Name="SelectedBox" Grid.Row="0" Grid.Column="3" Opacity="{Binding IsSelected}" BackgroundColor="{StaticResource sub_header}" >
<BoxView.WidthRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="5" />
</BoxView.WidthRequest>
</BoxView>
</Grid>
</StackLayout>
</customRender:CustomViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</customRender:ExtList>
my tries to fix the issue :
after long search I find soluation in xamarin site , is to make custom render to my list view but it docent work
public class CustomListViewRenderer : ListViewRenderer
{
protected override void OnElementChanged (ElementChangedEventArgs<Xamarin.Forms.ListView> e)
{
base.OnElementChanged (e);
if (e.NewElement != null) {
var listView = Control as UITableView;
listView.CellLayoutMarginsFollowReadableWidth = false;
}
}
}
reference https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/viewcell/
This is a known bug that is in the process of being fixed.

UWP Accessing content in a data bound ListView

I have a ListView with a ListView.ItemTemplate if it is important: the ListView is part of a Grid). I will strip it down here for the minumum:
<ListView x:Name="lstFotos" Grid.Row="2" Grid.Column="1" Height="auto" Tapped="imageControl_Tapped" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid IsTapEnabled="True" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image x:Name="imageControl" Width="200" Height="200" Source="{Binding DateiSoftwareBitmapSource}" IsTapEnabled="True" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" />
<TextBlock x:Name="txtImageDateDescription" Text="Aufnahmedatum: " Grid.Column="1" Grid.Row="0" />
<TextBlock x:Name="txtImageDescriptionDescription" Text="Beschreibung: " Grid.Column="1" Grid.Row="1" />
<TextBlock x:Name="txtImageDate" Text="{Binding Datum}" Grid.Column="2" Grid.Row="0" />
<TextBox x:Name="txtImageDescription" Text="{Binding Beschreibung}" Grid.Column="2" Grid.Row="1" />
<Button x:Name="btnSpeichern" Content="Speichern" Grid.Column="3" Grid.Row="1" Click="btnSpeichern_Click" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the code behing I do a
lstFotos.ItemsSource = AlleAnzeigeFotos
AlleAnzeigeFotos is a List(Of myClass), myClass contains the properties Datum, Beschreibung, DateiSoftwareBitmapSource.
What I want to do is that the user can edit the textfield, presses on the button and in the code behing I want to update the class and do some more stuff.
How can I get the appropriate instance of that class when I click the button?
UPDATE:
This is how it looks like:
"Beschreibung" (english: description) is empy after adding a foto and should be editable and stored by clicking "Speichern" (save).
(sender as Button).DataContext will give you the item which you clicked. Cast it to appropriate type of your class
update
Text="{Binding Beschreibung,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
var userenteredstring=((sender as Button).DataContext as your class).Beschreibung

Metro App Callisto Framework extend CustomDialog - Add TitleBackground

Does anyone know how to extend the CustomDialog control from Callisto metro app framework, to add a TitleBackground property?
Effectively, I would like to colour the Background of the row where the Title appears.
Figured it out:
In CustomDialog.cs add:
public Brush TitleBackground
{
get { return (Brush)GetValue(TitleBackgroundProperty); }
set { SetValue(TitleBackgroundProperty, value); }
}
public static readonly DependencyProperty TitleBackgroundProperty =
DependencyProperty.Register("TitleBackground", typeof(Brush), typeof(CustomDialog), null);
And then in Generic.xaml, go to the CustomDialog style and change the Grid definition to:
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="3" Grid.Row="0" Fill="{TemplateBinding TitleBackground}"/>
<Button Grid.Column="0" Grid.Row="0" x:Name="PART_BackButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,24,0,0" Style="{StaticResource DialogBackButtonStyle}" Command="{TemplateBinding BackButtonCommand}" CommandParameter="{TemplateBinding BackButtonCommandParameter}" Visibility="{TemplateBinding BackButtonVisibility}"/>
<local:DynamicTextBlock Grid.Column="1" Grid.Row="0" Foreground="{TemplateBinding TitleForeground}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="26.6667" FontWeight="Light" Margin="0,0,0,8" />
<ContentPresenter Grid.Column="1" Grid.Row="1" Margin="0" x:Name="PART_Content" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" />

Pop Up: a problem with margin Top

I'm developing a Windows Phone app.
I use a user control to show a pop up:
<UserControl x:Class="XXXXXXX.Views.Lists.GameDescriptionControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}" Height="290" Width="460">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Margin="0,0,0,0" Width="460">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="133"/>
<RowDefinition Height="86"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Center" Margin="10" Name="gameDescription" Text="" VerticalAlignment="Top" TextWrapping="Wrap" Grid.Row="1" Style="{StaticResource PhoneTextTitle3Style}" />
<Button Content="{Binding Path=AppResources.Yes, Source={StaticResource LocalizedStrings}}" Height="72" HorizontalAlignment="Left" Margin="50,5,0,0" Name="okButton" VerticalAlignment="Top" Width="160" Click="okButton_Click" Grid.Row="2" />
<Button Content="{Binding Path=AppResources.No, Source={StaticResource LocalizedStrings}}" Height="72" HorizontalAlignment="Left" Margin="244,5,0,0" Name="cancelButton" VerticalAlignment="Top" Width="160" Click="cancelButton_Click" Grid.Row="2" />
<TextBlock Grid.Row="0" x:Name="caption" HorizontalAlignment="Left" Margin="10" TextWrapping="Wrap" Text="{Binding Path=AppResources.Description, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextLargeStyle}"/>
</Grid>
</UserControl>
And this is the code to show the Pop Up:
private void showInfo(int gameId)
{
string gameDesc = getGameInfo(gameId);
p = new Popup();
GameDescriptionControl gd = new GameDescriptionControl();
gd.Description = gameDesc;
gd.OkClicked += new EventHandler(gd_OkClicked);
gd.CancelClicked += new EventHandler(gd_CancelClicked);
p.Child = gd;
// Set where the popup will show up on the screen.
p.VerticalOffset = 10;
p.HorizontalOffset = 10;
// Open the popup.
p.IsOpen = true;
}
But I get this:
As you can see, caption TextBlock hasn't got a margin top.
Any advice?
Margin will refer to the area outside of your textblock. If you want to move your text away from the edge of the textblock you will need to use the Padding attribute.
Not to act like the word paperclip, but it looks like you're trying to make a custom MessageBox.
Check this implementation out: http://cloudstore.blogspot.com/2011/01/customizing-messagebox-on-windows-phone.html . It's a great implementation of a messagebox that is very easy to use, looks/behaves very closely to the real MessageBox, and is lightweight.
Adding the few files that come with the solution, all you have to do is:
private MessageBoxService mbs = new MessageBoxService();
...
mbs.Closed +=new System.EventHandler(mbs_Closed);
mbs.Show("Confirm?","Are you sure you wish to do that?",MessageBoxServiceButton.YesNo,null);
void mbs_Closed(object sender, System.EventArgs e)
{
mbs.Closed -= mbs_Closed;
if (mbs.Result == MessageBoxResult.Yes)
{
...
}
}

Resources