I prototyped an app in Windows Phone 8.1 (WP) I was able to create cool controls using the which would allow me to put Labels and other controls inside a button and this would glue them all together.
I am now rebuilding the app in Xamarin.Forms (XF).
I am working around this issue for the time being in XF by using Absolute Layout but I fear and I am expecting this to fall apart over differnt phones, sizes and models.
I am certainly sure I am not the first to have this problem so I'm wondering how others have gotten around it.
Thank you :)
What I like doing in WP:
<Button Height="200" HorizontalAlignment="Left" Margin="232,1,0,0" Name="BtnVisitorScore" VerticalAlignment="Top" Width="220" Click="btnVisitorScore_Click" Grid.Row="1">
<StackPanel Margin="-5,-30,0,0" >
<TextBlock Text="{Binding MatchSettings.VisitingTeam.Name}" Height="40" HorizontalAlignment="Left" Width="180" FontSize="18" FontFamily="Arial" TextAlignment="Center" />
<TextBlock Text="{Binding VisitingTeamCurrentScore, StringFormat=N0}" Height="70" Width="180" FontSize="72" FontFamily="Arial" TextAlignment="Center" VerticalAlignment="Top" />
</StackPanel>
</Button>
Related
I'm new in developing applications for Windows Phone 8. I have a case that I need to add itens in a list, but I think will be nice if I could do something like the button "add an account", like in Windows Phone settings. See:
How can I do this?
I know how to do the accounts List. I can use LongListSelector, like this example:
<phone:LongListSelector x:Name="llsAccounts"
LayoutMode="List" Margin="0,150,0,0" SelectionChanged="llsAccounts_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
<!--Replace rectangle with image-->
<Border BorderThickness="1" Width="99" Height="99" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding AccountName}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock Text="{Binding DetailsAccount}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
I could resolve my problem using two LongListSelectors: one LongListSelector only for the "add an account" item and the second LongListSelector for the all added accounts. But this will be messy for me... it's not the right way.
Thanks!
There are quite a few ways you can to do this. You can just add a static <StackPanel> for your Add an Account follow by the LLS. Or you can use the LLS header/footer tags.
LLS header/footer example:
<phone:LongListSelector Name="lls">
<phone:LongListSelector.ListHeader>
<TextBlock Text="this is a header"/>
</phone:LongListSelector.ListHeader>
<phone:LongListSelector.ListFooter>
<TextBlock Text="this is a footer"/>
</phone:LongListSelector.ListFooter>
</phone:LongListSelector>
I created a chart in windows phone app using AmChart.I want to put the select value in the chart in a textbox How Can I do this?
This my code (Xaml) so far:
<!--ContentPanel - placez tout contenu supplémentaire ici-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<amq:SerialChart x:Name="MainPage1" DataSource="{Binding Data}" CategoryValueMemberPath="axis"
AxisForeground="White"
PlotAreaBackground="Black"
GridStroke="DarkGray" >
<amq:SerialChart.Graphs>
<amq:ColumnGraph ValueMemberPath="value" Title="Column #2" Brush="#8000FF00" ColumnWidthAllocation="0.4" />
</amq:SerialChart.Graphs>
</amq:SerialChart>
<amq:PieChart x:Name="Pie" DataSource="{Binding Data}" TitleMemberPath="axis" ValueMemberPath="value"/>
<TextBox HorizontalAlignment="Left" Height="72" Margin="184,326,-184,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="456"/>
</Grid>
</phone:PhoneApplicationPage>
The following library allows you to create charts easily in Windows Phone..
Take a look over here
I am developing a windows 8 metro app in which I have listbox which contains a set of textblocks and a Image.
<ListBox x:Name="lstbxbStudents" Background="Transparent" ItemContainerStyleSelector="{StaticResource ItemStyleSelector}" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemTemplate="{StaticResource LandscapeItemTemplate}" Height="476" SelectionChanged="lstbxbProducts_SelectionChanged_1" Style="{StaticResource ListBoxStyle1}" HorizontalAlignment="Left" Width="901">
</ListBox>
For that image ImgCmt I have set the source of the Image static inside the datatemplate of the listbox.
<Page.Resources>
<CollectionViewSource x:Name="cvs2" IsSourceGrouped="true" />
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">Students Screen</x:String>
<DataTemplate x:Key="LandscapeItemTemplate" >
<StackPanel Orientation="Horizontal">
<StackPanel Width="30"></StackPanel>
<StackPanel Width="120" Orientation="Horizontal">
<TextBlock Text="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="350">
<TextBlock Text="{Binding studsc}" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="10"></StackPanel>
<StackPanel Width="100">
<TextBlock Text="{Binding stuum}" x:Name="txtblkstuum" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="150">
<TextBlock Text="{Binding stugrp}" VerticalAlignment="Center" TextAlignment="Right" HorizontalAlignment="Center" />
</StackPanel>
<StackPanel Width="100">
<TextBlock Text="{Binding stusection, Mode=TwoWay}" TextAlignment="Center" x:Name="txtbxbstusection" Tag="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Right" />
</StackPanel>
<StackPanel Width="50"></StackPanel>
<StackPanel>
<Image Source="Assets/comments.png" Name="ImgCmt" PointerPressed="Image_PointerPressed_1" VerticalAlignment="Center" Width="20" Height="20"></Image>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
my objective is that I want to change the source of the image to different image source(change the image) in codebehind depnding upon some condition for that I need to access the control present inside a datatemplate of listbox in metro app ?
How can I do this :
How to access a control present inside a datatemplate of listbox in metro app?
What are the different ways in which I can do this?
How can I change the source of the image to different image source(change the image) in codebehind depending upon some condition?
This is a common question. We've all asked it at least once. The problem is that these controls don't have a unique name, because they are in a repeater. As a result, you cannot use the logical tree in XAML. The logical tree is what lets you call things by name. Instead, you need to use the visual tree in XAML. The visual tree is what lets you access everything on the screen including the dynamically rendered elements that adorn controls and populate repeaters. Because the visual tree is so big and because a repeater repeats, you still have to constrain the scope of the visual tree so you can reliably locate the control you want to find. I hope this makes sense.
Solution here: http://blog.jerrynixon.com/2012/09/how-to-access-named-control-inside-xaml.html
I have an image on my WPF form. It displays fine in the IDE but when I run it, its not there. Nor is the tooltip.
I've tried both .png and .jpg. Its marked as visible.
<Grid>
<Image x:Name="imgLogo" HorizontalAlignment="Left" Height="54" Margin="301,18,0,0" VerticalAlignment="Top" Width="194" Source="pack://siteoforigin:,,,/Resources/Logo.jpg" Stretch="None" ToolTip="Logo"/>
<Label x:Name="lblTitle" Content="Task Utility" HorizontalAlignment="Left" Margin="32,16,0,0" VerticalAlignment="Top" FontSize="22"/>
<Button x:Name="btnExit" Content="Exit" HorizontalAlignment="Left" Height="68" Margin="33,517,0,0" VerticalAlignment="Top" Width="94" Background="#FFD9422A" Foreground="#FFF7F3F3" FontSize="18" FontWeight="Bold" BorderThickness="0" RenderTransformOrigin="-2.202,0.456"/>
......
</Grid>
Any ideas? All the other elements (buttons, data grids, labels etc) work fine.
Do you have a /Resources/Logo.jpg file relative to the folder where the debug folder or compiled application resides?
For example if the app is located at: C:\myapp\myapp.exe then the image should be in C:\myapp\Resources\Logo.jpg
I am trying to hide scrollbars in my metro application like i usually do in windows phone app:
<WebView x:Name="webView"
Height="395" Width="300"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"/>
But it does not work even if i surround it with embedded
<ScrollViewer Name="ScrollViewerForWebView"
Grid.Row="1"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden">
<WebView x:Name="webView" Height="395" Width="300" />
</ScrollViewer>
Thanks!
what if you set
ScrollViewer.VerticalScrollBarVisibility="Disabled"