Display user's Facebook profile pic xamarin.forms Android - xaml

I am trying to display user's facebook profile picture. I have a working FacebookRenderer in my android project. I just need some guidelines on how to display the actual image. Below is my attempt on what I've tried but picture does not display. Any help will be appreciated.
I basically created a renderer for the Facebook Login in my android project and user details are saved and passed to the PCL using the Settings plugin(allowing my user's info to be saved in static variable)
FacebookRenderer:
public class FacebookRender : PageRenderer
{
public FacebookRender()
{
String error;
var activity = this.Context as Activity;
var auth = new OAuth2Authenticator(
clientId: "",
scope: "email",
authorizeUrl: new Uri("https://www.facebook.com/dialog/oauth/"),
redirectUrl: new Uri("https://www.facebook.com/connect/login_success.html")
);
auth.Completed += async (sender, eventArgs) =>
{
try
{
if (eventArgs.IsAuthenticated)
{
await AccountStore.Create().SaveAsync(eventArgs.Account, "FacebookProviderKey");
var accessToken = eventArgs.Account.Properties["access_token"].ToString();
var expiresIn = Convert.ToDouble(eventArgs.Account.Properties["expires_in"]);
var expiryDate = DateTime.Now + TimeSpan.FromSeconds(expiresIn);
var request = new OAuth2Request("GET", new Uri("https://graph.facebook.com/me?fields=email,first_name,last_name,gender,picture"), null, eventArgs.Account);
var response = await request.GetResponseAsync();
var obj = JObject.Parse(response.GetResponseText());
var id = obj["id"].ToString().Replace("\"", "");
var name = obj["first_name"].ToString().Replace("\"", "");
var surname = obj["last_name"].ToString().Replace("\"", "");
var gender = obj["gender"].ToString().Replace("\"", "");
var email = obj["email"].ToString().Replace("\"", "");
var profilePic = obj["picture"].ToString().Replace("\"", "");
Customer.Customers cust = new Customer.Customers();
cust.Number = "";
cust.Name = name;
cust.Surname = surname;
cust.Address = " ";
cust.Email = email;
cust.City = " ";
cust.Region = " ";
cust.Country = " ";
cust.MobilePhone = " ";
cust.DOB = DateTime.Now;
cust.Phone = " ";
cust.Credentials = new Customer.Credentials();
cust.Credentials.Authenticated = true;
cust.Credentials.SecretKey = "73fnfdbjfdj";
cust.DeviceToken = GcmService.RegistrationID;
Helpers.Settings.picture = profilePic;
CustomerService service = new CustomerService();
Settings.Token = await service.AddCustomer(cust);
Helpers.Settings.Usertoken = Settings.Token;
if (Helpers.Settings.MobileNo == null || Helpers.Settings.MobileNo == " ")
{
await App.NavigateToSMS();
}
else
{
App.NavigateToVerified();
}
}
else
{
App.NavigateToProfile();
}
}
catch(Exception ex)
{
error = ex.Message;
}
};
activity.StartActivity(auth.GetUI(activity));
}
Xaml
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="Center">
<Image x:Name="profilePic" HeightRequest="30" WidthRequest="30"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Label x:Name="lblMessage" FontSize="Medium" HorizontalOptions="Center" TextColor="White" VerticalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
Xaml.cs
profilePic.Source = Helpers.Settings.picture;

Related

I'm trying to expand the Datagrid when adding another value. Using Xamarin.Forms.Datagrid

I'm using Xamarin.Forms.Datagrid. What I'm struggling with is displaying the second row. I suspect it is in the adding value part that I'm not specifying to add a new row to the Datagrid. But for the life of me I can't see it.
Now if I scanned a different barcode. It adds the new value to the collection but does not expand the datagrid.
My ObservableCollection:
public ObservableCollection<dgvProductionReceiptSource> ProductionReceiptSource { get; } = new ObservableCollection<dgvProductionReceiptSource>();
Where I get my data from:
private void FillDataGrid()
{
try
{
using (SqlConnection connection = new SqlConnection(connectionString))
{
connection.Open();
using (SqlCommand command = new SqlCommand("SELECT DocNum, OWOR.ItemCode, ItemName, PlannedQty, CAST(OWOR.DueDate AS DATE) FROM OWOR " +
"INNER JOIN OITM ON OWOR.ItemCode = OITM.ItemCode WHERE Status = 'R' AND OWOR.DocNum = '" + ScanBarcodeText + "' ORDER BY DueDate ASC", connection))
{
using (SqlDataReader reader = command.ExecuteReader())
{
if (reader != null)
{
while (reader.Read())
{
ItemNum = reader.GetString(1);
Desc = reader.GetString(2);
PlannedQty = reader.GetDecimal(3);
DueDate = reader.GetDateTime(4);
ScanQty = 0;
if (DueDate == DateTime.Today)
{
if (DocNum.ToString() == ScanBarcodeText)
{
AddQty();
}
if (DocNum.ToString() != ScanBarcodeText)
{
DocNum = reader.GetInt32(0);
ProductionReceiptSource.Add(new dgvProductionReceiptSource()
{
DocNumProductionReceipt = DocNum,
ItemNumberProductionReceipt = reader.GetString(1),
DescriptionProductionReceipt = reader.GetString(2),
PlannedQuantityProductionReceipt = reader.GetDecimal(3),
ScannedQuantityProductionReceipt = 0
});
AddQty();
}
}
}
}
}
}
connection.Close();
}
ScanBarcodeText = string.Empty;
}
catch(Exception ex)
{
Application.Current.MainPage.DisplayAlert("Alert", ex.Message, "OK");
}
}
Any help would be appreciated
Like Jason suggested, I need to increase the height of the control
<ContentView HeightRequest="380">
<ScrollView Orientation="Horizontal">
<dg:DataGrid x:Name="dgvProductionReceiptSource"
ItemsSource="{Binding ProductionReceiptSource}"
IsRefreshing="{Binding ProductionReceiptRefresh}"
PullToRefreshCommand="{Binding ProductionReceiptRefreshCommand}"
IsVisible="False"
RowHeight="60"
HeaderHeight="50"
HeaderBackground="#e0e6f8"
HeaderFontSize="15"
ActiveRowColor="#8899AA">
<x:Arguments>
<ListViewCachingStrategy>RetainElement</ListViewCachingStrategy>
</x:Arguments>
<dg:DataGrid.Columns>
<dg:DataGridColumn Title="Order Number" PropertyName="DocNumProductionReceipt" Width="150"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
<dg:DataGridColumn Title="Item Number" PropertyName="ItemNumberProductionReceipt" Width="150"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
<dg:DataGridColumn Title="Item Description" PropertyName="DescriptionProductionReceipt" Width="150"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
<dg:DataGridColumn Title="Planned Quantity" PropertyName="PlannedQuantityProductionReceipt" Width="150"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
<dg:DataGridColumn Title="Scanned Bin" PropertyName="ScannedBinsProductionReceipt" Width="150"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
<dg:DataGridColumn Title="Remaining Bins" PropertyName="RemainingBinsProductionReceipt" Width="150"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
</dg:DataGrid.Columns>
<dg:DataGrid.RowsBackgroundColorPalette>
<dg:PaletteCollection>
<Color>#E0E6f8</Color>
</dg:PaletteCollection>
</dg:DataGrid.RowsBackgroundColorPalette>
</dg:DataGrid>
</ScrollView>
</ContentView>
I changed the ContentView HeightRequest

Xamarin - XAML Grid UI overwriting on each other

I am creating a UI using a grid in Xamarin which I have put in StackLayout.
Below is the following code for xaml.
program.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LoginPage.Page">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<StackLayout BackgroundColor="#3a4851">
<Label Text="Identifications" TextColor="White" FontSize="15" Margin="10" />
</StackLayout>
<StackLayout>
<Grid x:Name="identificationGridLayout" HorizontalOptions="Center"></Grid>
</StackLayout>
<StackLayout BackgroundColor="#3a4851">
<Label Text="Deciles" TextColor="White" FontSize="15" Margin="10" />
</StackLayout>
<StackLayout>
<Grid x:Name="decileGridLayout" HorizontalOptions="Center"></Grid>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I am creating the Grid header and data programatically.
program.cs
public partial class Page : ContentPage
{
private LoadingPopUp popUp;
private Repository repository = new Repository();
private JObject jResult;
private List<string> rowHeader;
private List<PrescriberIdentitifcation> prescriberIdentificationValue;
private List<PrescriberDecile> prescriberDecileValue;
public Page() { InitializeComponent(); }
public Page(string guid)
{
InitializeComponent();
FetchDataForDetail(guid);
}
async void FetchDataForDetail(string guid)
{
try
{
popUp = new LoadingPopUp("Loading data ...");
await PopupNavigation.PushAsync(popUp);
//Get Identification Data for prescriber
JObject identificationResult = await GetRepositoryDetailData(guid);
var identificationdata = JsonConvert.DeserializeObject<PrescriberIdentificationList>(identificationResult.ToString());
prescriberIdentificationValue = identificationdata.value;
int index = 0;
foreach (var obj in identificationResult["value"])
{
prescriberIdentificationValue[index].vcm_type_name = (string)obj["vcm_type#OData.Community.Display.V1.FormattedValue"];
index++;
}
drawIdentificationGrid();
//Get Deciles Data for prescriber
JObject decileResult = await GetRepositoryDetailData(guid);
var deciledata = JsonConvert.DeserializeObject<PrescriberIdentificationList>(decileResult.ToString());
prescriberIdentificationValue = deciledata.value;
Debug.WriteLine("data prescriberIdentificationValue : " + prescriberIdentificationValue);
drawDecilesGrid();
await PopupNavigation.PopAllAsync();
}
catch (Exception ex) {
Debug.WriteLine("error in identification loading : " + ex.Message);
await PopupNavigation.PopAllAsync();
}
}
public async Task<JObject> GetRepositoryDetailData(string guid, string entity, string filter)
{
try
{
jResult = await repository.Retrieve(GlobalVariables.AuthToken, entity, filter + guid);
return jResult;
}
catch (Exception err)
{
Debug.WriteLine(err.Message);
await PopupNavigation.PopAllAsync();
await DisplayAlert("Error", "Oops something went wrong", "Ok");
}
return jResult;
}
void drawIdentificationGrid()
{
try
{
rowHeader = new List<string>{"Type", "Number", "License State", "Sampleability","Expiration Date","License Status" };
drawGridHeader(identificationGridLayout,1, rowHeader.Count,rowHeader);
for (int rowIndex = 1; rowIndex <= prescriberIdentificationValue.Count; rowIndex++)
{
var datatypeLabel = new Label { Text = prescriberIdentificationValue[rowIndex-1].vcm_type_name.ToString(),FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
var datanumberLabel = new Label { Text = prescriberIdentificationValue[rowIndex-1].vcm_name.ToString(),FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
var datalicenseStateLabel = new Label { Text = (prescriberIdentificationValue[rowIndex-1]._vcm_licensestate_value != null) ? prescriberIdentificationValue[rowIndex-1]._vcm_licensestate_value : "-" , FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
var datasampleabiltiyLabel = new Label { Text = (prescriberIdentificationValue[rowIndex - 1].vcm_sampleability == false) ? "No": "Yes", FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
var dataexpirationDateLabel = new Label { Text = (prescriberIdentificationValue[rowIndex-1].vcm_expirationdate != null) ? prescriberIdentificationValue[rowIndex-1].vcm_expirationdate : "-", FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
Debug.WriteLine("data datatypeLabel {0} datanumberLabel {1} datalicenseStateLabel {2} datasampleabiltiyLabel {3} dataexpirationDateLabel {4} rowIndex {5}",datatypeLabel.Text,datanumberLabel.Text,datalicenseStateLabel.Text, datasampleabiltiyLabel.Text, dataexpirationDateLabel.Text, rowIndex);
identificationGridLayout.Children.Add(datatypeLabel, 0, rowIndex);
identificationGridLayout.Children.Add(datanumberLabel, 1, rowIndex);
identificationGridLayout.Children.Add(datalicenseStateLabel, 2, rowIndex);
identificationGridLayout.Children.Add(datasampleabiltiyLabel, 3, rowIndex);
identificationGridLayout.Children.Add(dataexpirationDateLabel, 4, rowIndex);
}
}
catch (Exception ex) { Debug.WriteLine("Error in drawing Identifications: "+ ex.Message);}
}
void drawDecilesGrid()
{
try
{
rowHeader = new List<string>{"Quarter", "Decile Type", "Decile", "Rank","Organization Type" };
drawGridHeader(decileGridLayout,1, rowHeader.Count, rowHeader);
//for (int rowIndex = 1; rowIndex <= prescriberIdentificationValue.Count; rowIndex++)
//{
// var datatypeLabel = new Label { Text = prescriberIdentificationValue[rowIndex - 1].vcm_type_name.ToString(), FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
// var datanumberLabel = new Label { Text = prescriberIdentificationValue[rowIndex - 1].vcm_name.ToString(), FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
// var datalicenseStateLabel = new Label { Text = (prescriberIdentificationValue[rowIndex - 1]._vcm_licensestate_value != null) ? prescriberIdentificationValue[rowIndex - 1]._vcm_licensestate_value : "-", FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
// var datasampleabiltiyLabel = new Label { Text = (prescriberIdentificationValue[rowIndex - 1].vcm_sampleability == false) ? "No" : "Yes", FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
// var dataexpirationDateLabel = new Label { Text = (prescriberIdentificationValue[rowIndex - 1].vcm_expirationdate != null) ? prescriberIdentificationValue[rowIndex - 1].vcm_expirationdate : "-", FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
// Debug.WriteLine("data datatypeLabel {0} datanumberLabel {1} datalicenseStateLabel {2} datasampleabiltiyLabel {3} dataexpirationDateLabel {4} rowIndex {5}",datatypeLabel.Text,datanumberLabel.Text,datalicenseStateLabel.Text, datasampleabiltiyLabel.Text, dataexpirationDateLabel.Text, rowIndex);
// identificationGridLayout.Children.Add(datatypeLabel, 0, rowIndex);
// identificationGridLayout.Children.Add(datanumberLabel, 1, rowIndex);
// identificationGridLayout.Children.Add(datalicenseStateLabel, 2, rowIndex);
// identificationGridLayout.Children.Add(datasampleabiltiyLabel, 3, rowIndex);
// identificationGridLayout.Children.Add(dataexpirationDateLabel, 4, rowIndex);
//}
}
catch (Exception ex) { Debug.WriteLine("Error in drawing Identifications: "+ ex.Message);}
}
void drawGridHeader(Grid gridLayout, int rowIndexLength, int columnIndexLength, List<string> rowHeaders)
{
try
{
gridLayout.RowDefinitions = new RowDefinitionCollection();
gridLayout.ColumnDefinitions = new ColumnDefinitionCollection();
for (int rowIndex = 0; rowIndex < rowIndexLength; rowIndex++)
{
gridLayout.RowDefinitions.Add(new RowDefinition());
}
for (int columnIndex = 0; columnIndex <= columnIndexLength; columnIndex++)
{
gridLayout.ColumnDefinitions.Add(new ColumnDefinition());
}
for (int i = 0; i < columnIndexLength; i++)
{
var label = new Label { Text = rowHeaders[i], FontSize = 14, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
identificationGridLayout.Children.Add(label, i, 0);
}
}
catch (Exception ex) { Debug.WriteLine("Error in drawing grid header: "+ ex.Message);}
}
}
}
drawGridHeader() is common to creating Header for different grids. Data for the cell is passed in different functions and grid reference is passed to it.
Ex: -
rowHeader = new List<string>{"Quarter", "Decile Type", "Decile", "Rank","Organization Type" };
drawGridHeader(decileGridLayout,1, rowHeader.Count, rowHeader);
But after fetching the data, The Grid is over writing on each other.
I tried creating manual grid with row item and they are stacking properly in order but when programmatically doing it, grid is stacking upon each other.
It should been below the Label Decile.
Inside the last for-loop in drawGridHeader(), you're not referencing the passed in grid when adding the labels:
for (int i = 0; i < columnIndexLength; i++)
{
var label = new Label { Text = rowHeaders[i], FontSize = 14, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
// This references the wrong Grid
// identificationGridLayout.Children.Add(label, i, 0);
gridLayout.Children.Add(label, i, 0);
}

Rich TextBlock in ListViewItem Text Wrapping

I have a RichTextBlock in a ListViewItem in a ListView. I can't for the life of me findout why the text wrapping on the RichTextBlock won't apply.
XAML:
<ScrollViewer x:Name="MessagesScroller" HorizontalScrollMode="Disabled">
<ListView x:Name="Messages" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
</ScrollViewer>
C#
ListViewItem listviewitem = new ListViewItem();
listviewitem.HorizontalContentAlignment = HorizontalAlignment.Stretch;
listviewitem.VerticalAlignment = VerticalAlignment.Stretch;
listviewitem.Tag = message.Id;
StackPanel stack = new StackPanel();
stack.Orientation = Orientation.Horizontal;
stack.VerticalAlignment = VerticalAlignment.Stretch;
Image Avatar = new Image();
Avatar.Height = 50;
Avatar.VerticalAlignment = VerticalAlignment.Top;
Avatar.Source = new BitmapImage(new Uri("https://cdn.discordapp.com/avatars/" + message.User.Id + "/" + message.User.Avatar + ".jpg"));
stack.Children.Add(Avatar);
StackPanel innerstack = new StackPanel();
innerstack.VerticalAlignment = VerticalAlignment.Stretch;
StackPanel MsgData = new StackPanel();
MsgData.Orientation = Orientation.Horizontal;
#region RichTextBlock
RichTextBlock user = new RichTextBlock();
user.TextWrapping = TextWrapping.WrapWholeWords;
Paragraph userPara = new Paragraph();
Run run1 = new Run();
run1.Text = message.User.Username;
userPara.Inlines.Add(run1);
user.Blocks.Add(userPara);
#endregion
MsgData.Children.Add(user);
#region RichTextBlock
RichTextBlock timestamp = new RichTextBlock();
Paragraph timePara = new Paragraph();
Run run2 = new Run();
run2.Text = message.Timestamp.Month.ToString() + "/" + message.Timestamp.Day + " at " + message.Timestamp.Hour.ToString() + ":";
if (message.Timestamp.Minute < 9)
{
run2.Text += "0";
}
run2.Text += message.Timestamp.Minute.ToString();
timestamp.Foreground = GetSolidColorBrush("#FF333333");
timePara.Inlines.Add(run2);
timestamp.Blocks.Add(timePara);
timestamp.Margin = new Thickness(5, 0, 0, 0);
#endregion
MsgData.Children.Add(timestamp);
innerstack.Children.Add(MsgData);
#region RichTextBlock
RichTextBlock txtblock = new RichTextBlock();
txtblock.TextWrapping = TextWrapping.WrapWholeWords;
Paragraph txtPara = new Paragraph();
Run run3 = new Run();
run3.Text = message.Content;
txtPara.Inlines.Add(run3);
txtblock.Blocks.Add(txtPara);
foreach (SharedModels.Embed embed in message.Embeds)
{
Paragraph paragraph = new Paragraph();
if (embed.title != null)
{
Run title = new Run();
title.Text = embed.title + "\n";
paragraph.Inlines.Add(title);
}
if (embed.Description != null)
{
Run desc = new Run();
desc.Text = embed.Description + "\n";
paragraph.Inlines.Add(desc);
}
if (embed.Thumbnail.Url != null)
{
InlineUIContainer container = new InlineUIContainer();
BitmapImage bi = new BitmapImage(new Uri(embed.Thumbnail.ProxyUrl));
Image image = new Image();
image.Height = 300;
image.Source = bi;
container.Child = image;
paragraph.Inlines.Add(container);
}
txtblock.Blocks.Add(paragraph);
}
foreach (SharedModels.Attachment attach in message.Attachments)
{
Paragraph paragraph = new Paragraph();
Run run = new Run();
run.Text = attach.Filename;
BitmapImage bi = new BitmapImage(new Uri(attach.Url));
Image image = new Image();
image.Height = 300;
image.Source = bi;
InlineUIContainer container = new InlineUIContainer();
container.Child = image;
paragraph.Inlines.Add(run);
paragraph.Inlines.Add(container);
txtblock.Blocks.Add(paragraph);
}
#endregion
innerstack.Children.Add(txtblock);
stack.Children.Add(innerstack);
listviewitem.Content = stack;
#region Flyout
Flyout flyout = new Flyout();
StackPanel flyoutcontent = new StackPanel();
flyoutcontent.Margin = new Thickness(-10);
/*Button AddRection = new Button()
{
Content = "Add Reaction",
HorizontalAlignment = HorizontalAlignment.Stretch
};
flyoutcontent.Children.Add(AddRection);
Button Pin = new Button()
{
Content = "Pin",
HorizontalAlignment = HorizontalAlignment.Stretch
};
flyoutcontent.Children.Add(Pin);*/
/*Button Edit = new Button()
{
Content = "Edit",
HorizontalAlignment = HorizontalAlignment.Stretch,
Tag = message.Id
};
Edit.Click += EditMessage;
flyoutcontent.Children.Add(Edit);*/
Button Delete = new Button()
{
Content = "Delete",
HorizontalAlignment = HorizontalAlignment.Stretch,
Tag = message.Id
};
Delete.Click += DeleteThisMessage;
flyoutcontent.Children.Add(Delete);
flyout.Content = flyoutcontent;
listviewitem.ContextFlyout = flyout;
listviewitem.RightTapped += OpenRightTapFlyout;
listviewitem.Holding += OpenHoldingFlyout;
#endregion
Messages.Items.Add(listviewitem);
I have uprooted my entire program to use StackPanels instead but that didn't help
You used StackPanel for your layout and set the Orientation property to Horizontal for the StackPanel. StackPanel is size to its children. So it seems like the reason is that you don't set the Width property for the RichTextBlock. The width of RichTextBlock size to its content, StackPanelsize toRichTextBlock`, it may not wrap.
You may have several ways to resolve this:
Set width property for the RichTextBlock.
RichTextBlock txtblock = new RichTextBlock();
txtblock.Width = 300;
txtblock.TextWrapping = TextWrapping.WrapWholeWords;
Remove the orientation property for the StackPanel if you don't need such a layout.
//stack.Orientation = Orientation.Horizontal;
Or you may use a Grid instead. Grid may better help you define the layout. You may define the image and RichTextBlock layout as followings.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="Assets/caffe1.jpg" Height="100" Grid.Row="0" Grid.Column="0"></Image>
<RichTextBlock TextWrapping="WrapWholeWords" Grid.Row="0" Grid.Column="1">
<Paragraph>
<Run FontStyle="Italic">sample text todemonstrate some properties.demonstrate some properties.demonstrate some properties.demonstrate some properties.
demonstrate some properties.demonstrate some properties.demonstrate some properties.demonstrate some properties.demonstrate some properties.
</Run>
</Paragraph>
</RichTextBlock>
</Grid>

Custom Slider Windows 8.1

i need to create a custom slider, at the moment my slider looks exactly how i want, it looks like this (image from VisualStudio):
ant the xaml code is this:
<Grid x:Name="mainGrid">
<Grid Height="240" Width="300" Canvas.ZIndex="2">
<Grid.RenderTransform>
<RotateTransform x:Name="rotateTransform"
Angle="-125"
CenterX="150"
CenterY="150" />
</Grid.RenderTransform>
<Ellipse Height="54" Width="54"
x:Name="knob"
Fill="Red"
PointerMoved="Image_PointerMoved"
VerticalAlignment="Top"
Margin="0,-7,0,0"/>
</Grid>
<Path x:Name="path"
Data="M269.01,233.229 C303.532,181.303 304.261,118.855 269.097,67.0139 C207.933,-15.2077 92.8603,-16.8742 31.2108,66.0937 C-3.68835,121.514 -3.36331,179.271 30.8461,232.917 C51.2571,253.282 74.8965,230.573 61.3585,209.167 C38.2919,172.761 36.0008,129.688 62.1396,90.2093 C106.398,28.022 194.916,29.4803 237.509,90.1399 C262.554,127.345 263.613,170.209 237.647,209.792 C227.355,233.49 250.474,250.782 269.01,233.229 z"
Stretch="Fill"
Fill="Gray" />
</Grid>
and the C# code is this:
private void Image_PointerMoved(object sender, PointerRoutedEventArgs e)
{
//Canculate the current rotation angle and set the value.
var newPos = e.GetCurrentPoint(path);
double angle = GetAngleR(newPos.Position);
rotateTransform.Angle = angle;
}
public double GetAngleR(Point pos)
{
var xDiff = 150 - pos.X;
var yDiff = 150 - pos.Y;
var r = Math.Sqrt((xDiff * xDiff) + (yDiff * yDiff));
var radians = Math.Acos((yDiff) / r);
var angle = radians * (180 / Math.PI);
if(angle > 125)
{
angle = 125;
}
if(pos.X < 150)
{
angle = -angle;
}
return angle;
}
my problem is how i fill the path with a different color as i move the ellipse?
i need to achive somethig like this:
any suggestion?
Ok I have figured out how to do this slider, this isn't a perfect solution but it works and for me is enough.
I have created a GeometryGroup that contains some BezierSegment used to draw the arch path and then I have added a to the group a RectangleGeometry that is the size of the element.
With GeometryGroup in this case, the intersecting area of two shapes is not filled.
After that i have placed the right color behind the main path.
this is the code:
XAML
<Grid x:Name="mainGrid">
<Grid Height="240" Width="300" Canvas.ZIndex="2">
<Grid.RenderTransform>
<RotateTransform x:Name="rotateTransform"
Angle="-125"
CenterX="150"
CenterY="150" />
</Grid.RenderTransform>
<Image Height="54" Width="54" x:Name="knob"
Source="ms-appx:///Assets/ic_slider_credito.png"
PointerMoved="Image_PointerMoved"
VerticalAlignment="Top"
Margin="0,-5,0,0" />
</Grid>
<Rectangle VerticalAlignment="Top"
HorizontalAlignment="Left"
Fill="Gray"
Width="300"
Height="240" />
<Path x:Name="fillPath"
Height="240"
Width="300"
UseLayoutRounding="False"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Fill="Orange" />
<Path x:Name="path"
Height="240"
Width="300"
UseLayoutRounding="False"
Stretch="Fill"
Fill="White" />
</Grid>
C#
public SliderInvioCredito()
{
this.InitializeComponent();
DrawPath();
}
private void Image_PointerMoved(object sender, PointerRoutedEventArgs e)
{
var newPos = e.GetCurrentPoint(path);
double angle = GetAngleR(newPos.Position);
rotateTransform.Angle = angle;
}
public double GetAngleR(Point pos)
{
var xDiff = 150 - pos.X;
var yDiff = 150 - pos.Y;
var r = Math.Sqrt((xDiff * xDiff) + (yDiff * yDiff));
var radians = Math.Acos((yDiff) / r);
var angle = radians * (180 / Math.PI);
if (angle > 125)
{
angle = 125;
}
if (pos.X < 150)
{
angle = -angle;
}
DrawFillPath(pos.X, pos.Y, angle);
return angle;
}
private void DrawFillPath(double x, double y, double angle)
{
var start = new Point(150, 120);
var pth = new PathFigure();
pth.StartPoint = start;
var ls1 = new LineSegment();
ls1.Point = start;
pth.Segments.Add(ls1);
var ls8 = new LineSegment();
ls8.Point = new Point(150, 240);
pth.Segments.Add(ls8);
var ls2 = new LineSegment();
ls2.Point = new Point(0, 240);
pth.Segments.Add(ls2);
if (angle > -45)
{
var ls5 = new LineSegment();
ls5.Point = new Point(0, 0);
pth.Segments.Add(ls5);
if (angle > -30)
{
var ls6 = new LineSegment();
ls6.Point = new Point(x, 0);
pth.Segments.Add(ls6);
}
}
else
{
var ls3 = new LineSegment();
ls3.Point = new Point(0, y);
pth.Segments.Add(ls3);
}
if (angle > 45)
{
var ls7 = new LineSegment();
ls7.Point = new Point(300, 0);
pth.Segments.Add(ls7);
var ls9 = new LineSegment();
ls9.Point = new Point(300, y);
pth.Segments.Add(ls9);
}
var ls4 = new LineSegment();
ls4.Point = new Point(x, y);
pth.Segments.Add(ls4);
var pthCollection = new PathFigureCollection();
pthCollection.Add(pth);
var pthGeometry = new PathGeometry();
pthGeometry.Figures = pthCollection;
fillPath.Data = pthGeometry;
}
private void DrawPath()
{
var cc1 = new BezierSegment();
cc1.Point1 = new Point(303.532, 181.303);
cc1.Point2 = new Point(304.261, 118.855);
cc1.Point3 = new Point(269.097, 67.0139);
var cc2 = new BezierSegment();
cc2.Point1 = new Point(207.933, -15.2077);
cc2.Point2 = new Point(92.8603, -16.8742);
cc2.Point3 = new Point(31.2108, 66.0937);
var cc3 = new BezierSegment();
cc3.Point1 = new Point(-3.68835, 121.514);
cc3.Point2 = new Point(-3.36331, 179.271);
cc3.Point3 = new Point(30.8461, 232.917);
var cc4 = new BezierSegment();
cc4.Point1 = new Point(51.2571, 253.282);
cc4.Point2 = new Point(74.8965, 230.573);
cc4.Point3 = new Point(61.3585, 209.167);
var cc5 = new BezierSegment();
cc5.Point1 = new Point(38.2919, 172.761);
cc5.Point2 = new Point(36.0008, 129.688);
cc5.Point3 = new Point(62.1396, 90.2093);
var cc6 = new BezierSegment();
cc6.Point1 = new Point(106.398, 28.022);
cc6.Point2 = new Point(194.916, 29.4803);
cc6.Point3 = new Point(237.509, 90.1399);
var cc7 = new BezierSegment();
cc7.Point1 = new Point(262.554, 127.345);
cc7.Point2 = new Point(263.613, 170.209);
cc7.Point3 = new Point(237.647, 209.792);
var cc8 = new BezierSegment();
cc8.Point1 = new Point(227.355, 233.49);
cc8.Point2 = new Point(250.474, 250.782);
cc8.Point3 = new Point(269.01, 233.229);
var pthFigure = new PathFigure();
pthFigure.StartPoint = new Point(269.01, 233.229);
var psc = new PathSegmentCollection();
psc.Add(cc1);
psc.Add(cc2);
psc.Add(cc3);
psc.Add(cc4);
psc.Add(cc5);
psc.Add(cc6);
psc.Add(cc7);
psc.Add(cc8);
pthFigure.Segments = psc;
var pthFigureCollection = new PathFigureCollection();
pthFigureCollection.Add(pthFigure);
var pthGeometry = new PathGeometry();
pthGeometry.Figures = pthFigureCollection;
var rect = new RectangleGeometry();
rect.Rect = new Rect(0, 0, 300, 240);
var gg = new GeometryGroup();
gg.Children.Add(pthGeometry);
gg.Children.Add(rect);
path.Data = gg;
}

Windows Phone 8.1 - Daily Calendar and issue

I was trying to make daily calendar and I create this:
xaml:
<Page
x:Class="Calendar.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Calendar"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Pivot x:Name="CalendarPivot" Title="Pivot" SelectionChanged="CalendarPivot_SelectionChanged">
</Pivot>
</Grid>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="TodayAppBarButton" Label="dziś" Click="TodayAppBarButton_Click">
<AppBarButton.Icon>
<FontIcon x:Name="TodayFontIcon" Glyph="" FontSize="10" FontFamily="Segoe WP"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton x:Name="ChooseDateAppBarButton" Label="wybierz" Icon="Calendar" Click="ChooseDateAppBarButton_Click">
<FlyoutBase.AttachedFlyout>
<DatePickerFlyout DatePicked="DatePickerFlyout_DatePicked"/>
</FlyoutBase.AttachedFlyout>
</AppBarButton>
</CommandBar>
</Page.BottomAppBar>
c#:
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Navigation;
namespace Calendar
{
public sealed partial class MainPage : Page
{
bool pivotClear = false;
public MainPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var monthDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month.abbreviated");
SetCalendar(DateTimeOffset.Now);
TodayFontIcon.Glyph = DateTimeOffset.Now.Day + " " + monthDatefmt.Format(DateTimeOffset.Now);
}
private void SetCalendar(DateTimeOffset startDate)
{
var loader = new Windows.ApplicationModel.Resources.ResourceLoader();
var dayOfWeekDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("dayofweek.full");
var dayMonthYearDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("day month year");
for (int i = -4; i < 5; i++)
{
PivotItem pivotItem = new PivotItem();
DateTimeOffset date = new DateTimeOffset();
date = startDate.AddDays(i);
pivotItem.Tag = date.Month + "/" + date.Day + "/" + date.Year;
if (date.Date == DateTimeOffset.Now.Date)
{
pivotItem.Header = loader.GetString("Today");
}
else
{
pivotItem.Header = dayOfWeekDatefmt.Format(date).ToLower();
}
CalendarPivot.Items.Add(pivotItem);
}
CalendarPivot.SelectedIndex = 4;
CalendarPivot.Title = dayMonthYearDatefmt.Format(startDate).ToUpper();
}
private void CalendarPivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var loader = new Windows.ApplicationModel.Resources.ResourceLoader();
Debug.WriteLine("change started" + CalendarPivot.SelectedIndex);
if (!pivotClear)
{
var sdatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("dayofweek.full");
var dayMonthYearDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("day month year");
PivotItem selectedPivotItem = CalendarPivot.SelectedItem as PivotItem;
DateTimeOffset selectedPivotItemDate = new DateTimeOffset();
selectedPivotItemDate = DateTimeOffset.Parse(selectedPivotItem.Tag as string);
CalendarPivot.Title = dayMonthYearDatefmt.Format(selectedPivotItemDate).ToUpper();
PivotItem lastPivotItem = CalendarPivot.Items.Last() as PivotItem;
DateTimeOffset lastPivotItemDate = new DateTimeOffset();
lastPivotItemDate = DateTimeOffset.Parse(lastPivotItem.Tag as string);
if (selectedPivotItemDate.Date >= lastPivotItemDate.Date.AddDays(-3))
{
PivotItem pivotItem = new PivotItem();
DateTimeOffset date = new DateTimeOffset();
date = lastPivotItemDate.AddDays(1);
pivotItem.Tag = date.Month + "/" + date.Day + "/" + date.Year;
if (date.Date == DateTimeOffset.Now.Date)
{
pivotItem.Header = loader.GetString("Today");
}
else
{
pivotItem.Header = sdatefmt.Format(date).ToLower();
}
CalendarPivot.Items.Add(pivotItem);
}
PivotItem firstPivotItem = CalendarPivot.Items.First() as PivotItem;
DateTimeOffset firstPivotItemDate = new DateTimeOffset();
firstPivotItemDate = DateTimeOffset.Parse(firstPivotItem.Tag as string);
if (selectedPivotItemDate.Date <= firstPivotItemDate.Date.AddDays(3))
{
PivotItem pivotItem = new PivotItem();
DateTimeOffset date = new DateTimeOffset();
date = firstPivotItemDate.AddDays(-1);
pivotItem.Tag = date.Month + "/" + date.Day + "/" + date.Year;
if (date.Date == DateTimeOffset.Now.Date)
{
pivotItem.Header = "dziś";
}
else
{
pivotItem.Header = sdatefmt.Format(date).ToLower();
}
CalendarPivot.Items.Insert(0, pivotItem);
}
}
Debug.WriteLine("change ended" + CalendarPivot.SelectedIndex);
}
private void TodayAppBarButton_Click(object sender, RoutedEventArgs e)
{
pivotClear = true;
CalendarPivot.Items.Clear();
SetCalendar(DateTimeOffset.Now);
pivotClear = false;
}
private void ChooseDateAppBarButton_Click(object sender, RoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}
private void DatePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
{
pivotClear = true;
DateTimeOffset date = args.NewDate;
CalendarPivot.Items.Clear();
SetCalendar(date);
pivotClear = false;
}
}
}
It works well when I change days forward, but I have one heavyweight bug in backward way. I will try to explain it in steps.
Today is monday and user changes it to previous day.
Pivot's selected item changes from 4(monday) to 3(sunday) .
System decects that it must generate one more item to pivot.
System generates new item and inserts it in 0 position.
Pivot's selected item changes from 3 to 4(now sunday).
Pivot still shows item 3 which is saturday now, and it's looks like calendar skipped one day.
I would be very grateful if someone knows how to fix it.
EDIT :
I made change based on Nate Diamond suggestion and it works for now well:
Here, have a code:
XAML:
<Page
x:Class="LetsMakeANewCalendar.NewCalendar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:LetsMakeANewCalendar"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Pivot x:Name="CalendarPivot" Title="" SelectionChanged="CalendarPivot_SelectionChanged">
<PivotItem x:Name="PivotItem0"/>
<PivotItem x:Name="PivotItem1"/>
<PivotItem x:Name="PivotItem2"/>
<PivotItem x:Name="PivotItem3"/>
<PivotItem x:Name="PivotItem4"/>
<PivotItem x:Name="PivotItem5"/>
<PivotItem x:Name="PivotItem6"/>
</Pivot>
</Grid>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton x:Name="TodayAppBarButton" Label="dziś" Click="TodayAppBarButton_Click">
<AppBarButton.Icon>
<FontIcon x:Name="TodayFontIcon" Glyph="" FontSize="10" FontFamily="Segoe WP"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton x:Name="ChooseDateAppBarButton" Label="wybierz" Icon="Calendar" Click="ChooseDateAppBarButton_Click">
<FlyoutBase.AttachedFlyout>
<DatePickerFlyout DatePicked="DatePickerFlyout_DatePicked"/>
</FlyoutBase.AttachedFlyout>
</AppBarButton>
</CommandBar>
</Page.BottomAppBar>
C#:
public sealed partial class NewCalendar : Page
{
int pivotIndex;
DateTimeOffset previousDate = new DateTimeOffset();
public NewCalendar()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var monthDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("month.abbreviated");
SetCalendar(DateTimeOffset.Now);
TodayFontIcon.Glyph = DateTimeOffset.Now.Day + " " + monthDatefmt.Format(DateTimeOffset.Now);
}
private void SetCalendar(DateTimeOffset startDate)
{
var loader = new Windows.ApplicationModel.Resources.ResourceLoader();
var dayOfWeekDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("dayofweek.full");
var dayMonthYearDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("day month year");
int numberOfDay = GetNumberOfDay(startDate);
int i = 0;
foreach (PivotItem item in CalendarPivot.Items)
{
DateTimeOffset date = new DateTimeOffset();
date = startDate.AddDays(i - numberOfDay);
item.Tag = date.Month + "/" + date.Day + "/" + date.Year;
item.Header = dayOfWeekDatefmt.Format(date).ToLower();
i++;
}
CalendarPivot.SelectedIndex = pivotIndex = numberOfDay;
}
private int GetNumberOfDay(DateTimeOffset date)
{
int numberOfDay;
switch (date.DayOfWeek)
{
case DayOfWeek.Monday:
numberOfDay = 0;
break;
case DayOfWeek.Tuesday:
numberOfDay = 1;
break;
case DayOfWeek.Wednesday:
numberOfDay = 2;
break;
case DayOfWeek.Thursday:
numberOfDay = 3;
break;
case DayOfWeek.Friday:
numberOfDay = 4;
break;
case DayOfWeek.Saturday:
numberOfDay = 5;
break;
case DayOfWeek.Sunday:
numberOfDay = 6;
break;
default:
numberOfDay = -1;
break;
}
return numberOfDay;
}
private void CalendarPivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var loader = new Windows.ApplicationModel.Resources.ResourceLoader();
Debug.WriteLine("old pivot index " + pivotIndex);
Debug.WriteLine("change started " + CalendarPivot.SelectedIndex);
var dayMonthYearDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("day month year");
if ((CalendarPivot.SelectedIndex == 6) && (pivotIndex == 0))
{
SetCalendar(previousDate.AddDays(-1));
}
else if ((CalendarPivot.SelectedIndex == 0) && (pivotIndex == 6))
{
SetCalendar(previousDate.AddDays(1));
}
PivotItem selectedPivotItem = CalendarPivot.SelectedItem as PivotItem;
DateTimeOffset selectedPivotItemDate = new DateTimeOffset();
selectedPivotItemDate = DateTimeOffset.Parse(selectedPivotItem.Tag as string);
previousDate = selectedPivotItemDate.Date;
pivotIndex = CalendarPivot.SelectedIndex;
CalendarPivot.Title = dayMonthYearDatefmt.Format(selectedPivotItemDate).ToUpper();
if (selectedPivotItemDate.Date == DateTimeOffset.Now.Date)
{
CalendarPivot.Title += " - " + loader.GetString("Today").ToUpper();
}
Debug.WriteLine("change ended " + CalendarPivot.SelectedIndex);
Debug.WriteLine("new pivot index " + pivotIndex);
}
private void TodayAppBarButton_Click(object sender, RoutedEventArgs e)
{
var loader = new Windows.ApplicationModel.Resources.ResourceLoader();
var dayMonthYearDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("day month year");
SetCalendar(DateTimeOffset.Now);
PivotItem selectedPivotItem = CalendarPivot.SelectedItem as PivotItem;
DateTimeOffset selectedPivotItemDate = new DateTimeOffset();
selectedPivotItemDate = DateTimeOffset.Parse(selectedPivotItem.Tag as string);
previousDate = selectedPivotItemDate.Date;
pivotIndex = CalendarPivot.SelectedIndex;
CalendarPivot.Title = dayMonthYearDatefmt.Format(selectedPivotItemDate).ToUpper() + " - " + loader.GetString("Today").ToUpper();
}
private void ChooseDateAppBarButton_Click(object sender, RoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}
private void DatePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
{
var loader = new Windows.ApplicationModel.Resources.ResourceLoader();
var dayMonthYearDatefmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("day month year");
DateTimeOffset date = args.NewDate;
SetCalendar(date);
PivotItem selectedPivotItem = CalendarPivot.SelectedItem as PivotItem;
DateTimeOffset selectedPivotItemDate = new DateTimeOffset();
selectedPivotItemDate = DateTimeOffset.Parse(selectedPivotItem.Tag as string);
previousDate = selectedPivotItemDate.Date;
pivotIndex = CalendarPivot.SelectedIndex;
CalendarPivot.Title = dayMonthYearDatefmt.Format(selectedPivotItemDate).ToUpper();
if (selectedPivotItemDate.Date == DateTimeOffset.Now.Date)
{
CalendarPivot.Title += " - " + loader.GetString("Today").ToUpper();
}
}
}