Need help to improve the appearance on Xamarin iOS tab - c#

I want to improve the size and background of my content page on ios,
var About = new ContentPage() { Title = "About" };
var layout = new StackLayout();
var line1 = new Label() { Text = viewModel.Member.Line1, FontSize = 16, HorizontalTextAlignment = TextAlignment.Center };
var MapTab = new ContentPage() {Title = "Map"};
Android:
The title of the content page appears very small on ios and not visible. I need help in trying to improve the looks and make it bigger.

You'll have to implement Custom Renderer for your TabbedPage. See this link:
Extending TabbedPage in Xamarin Forms.
It says, that:
To do these customizations we will use a custom renderer on each platform to render the TabbedPage.
I will duplicate the code snippets from the source as a example:
YourTabbedPage.xaml:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CustomTabbedPage.MainPage"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom">
<TabbedPage.Children>
<ContentPage Title="Home" Icon="ic_home.png" BackgroundColor="White"/>
<ContentPage Title="Favorites" Icon="ic_favorite.png" BackgroundColor="White"/>
<ContentPage Title="App" Icon="app_logo_unselected.png" x:Name="home" BackgroundColor="White"/>
<ContentPage Title="Friends" Icon="ic_people.png" BackgroundColor="White"/>
<ContentPage Title="Settings" Icon="ic_settings.png" BackgroundColor="White"/>
</TabbedPage.Children>
</TabbedPage>
iOS Custom Renderer:
public class ExtendedTabbedPageRenderer : TabbedRenderer
{
public override void ViewWillAppear(bool animated)
{
if (TabBar?.Items == null)
return;
var tabs = Element as TabbedPage;
if (tabs != null)
{
for (int i = 0; i < TabBar.Items.Length; i++)
{
UpdateTabBarItem(TabBar.Items[i], tabs.Children[i].Icon);
}
}
base.ViewWillAppear(animated);
}
private void UpdateTabBarItem(UITabBarItem item, string icon)
{
if (item == null || icon == null)
return;
// Set the font for the title.
item.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.FromName("GillSans-UltraBold", 12), TextColor = Color.FromHex("#757575").ToUIColor() }, UIControlState.Normal);
item.SetTitleTextAttributes(new UITextAttributes() { Font = UIFont.FromName("GillSans-UltraBold", 12), TextColor = Color.FromHex("#3C9BDF").ToUIColor() }, UIControlState.Selected);
}
}
Android Custom Renderer:
public class ExtendedTabbedPageRenderer : TabbedPageRenderer
{
Xamarin.Forms.TabbedPage tabbedPage;
BottomNavigationView bottomNavigationView;
Android.Views.IMenuItem lastItemSelected;
int lastItemId=-1;
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
tabbedPage = e.NewElement as ExtendedTabbedPage;
bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;
bottomNavigationView.NavigationItemSelected += BottomNavigationView_NavigationItemSelected;
//Call to change the font
ChangeFont();
}
if (e.OldElement != null)
{
bottomNavigationView.NavigationItemSelected -= BottomNavigationView_NavigationItemSelected;
}
}
//Change Tab font
void ChangeFont()
{
var fontFace = Typeface.CreateFromAsset(Context.Assets, "gilsansultrabold.ttf");
var bottomNavMenuView = bottomNavigationView.GetChildAt(0) as BottomNavigationMenuView;
for (int i = 0; i < bottomNavMenuView.ChildCount; i++)
{
var item = bottomNavMenuView.GetChildAt(i) as BottomNavigationItemView;
var itemTitle = item.GetChildAt(1);
var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));
lastItemId = bottomNavMenuView.SelectedItemId;
smallTextView.SetTypeface(fontFace, TypefaceStyle.Bold);
largeTextView.SetTypeface(fontFace, TypefaceStyle.Bold);
//Set text color
var textColor = (item.Id == bottomNavMenuView.SelectedItemId) ? tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid() : tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();
smallTextView.SetTextColor(textColor);
largeTextView.SetTextColor(textColor);
}
}
void BottomNavigationView_NavigationItemSelected(object sender, BottomNavigationView.NavigationItemSelectedEventArgs e)
{
var normalColor = tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();
var selectedColor = tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid();
if(lastItemId!=-1)
{
SetTabItemTextColor(bottomNavMenuView.GetChildAt(lastItemId) as BottomNavigationItemView, normalColor);
}
SetTabItemTextColor(bottomNavMenuView.GetChildAt(e.Item.ItemId) as BottomNavigationItemView, selectedColor);
this.OnNavigationItemSelected(e.Item);
lastItemId = e.Item.ItemId;
}
void SetTabItemTextColor(BottomNavigationItemView bottomNavigationItemView, Android.Graphics.Color textColor)
{
var itemTitle = bottomNavigationItemView.GetChildAt(1);
var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));
smallTextView.SetTextColor(textColor);
largeTextView.SetTextColor(textColor);
}
}

I created a content class for the two pages I wanted to improve on, the map and the memberaboutpage and I instead of using the content page, I did this
var About = new MemberAboutPage { Title = "About" };
var layout = new StackLayout();
var MapTab = new MapPage() { Title = "Map" };
Then I added the pages to the pages I created and mirrored to the ios rendere page below, this page formats the tabs and makes them more nicer looking and alos prevents the overlapping on iPhone X. Happy Programming Mates
'[assembly: ExportRenderer(typeof(CardPage), typeof(MyiOSTabbedPage))]
[assembly: ExportRenderer(typeof(LoginPage), typeof(MyiOSTabbedPage))]
[assembly: ExportRenderer(typeof(MemberAboutPage), typeof(MyiOSTabbedPage))]
[assembly: ExportRenderer(typeof(MapPage), typeof(MyiOSTabbedPage))]
namespace CHA.iOS.Renderers
{
public class MyiOSTabbedPage : PageRenderer
{
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
nfloat tabSize = 44.0f;
UIInterfaceOrientation orientation = UIApplication.SharedApplication.StatusBarOrientation;
CGRect rect = this.View.Frame;
rect.Y = this.NavigationController != null ? tabSize : tabSize + 20;
this.View.Frame = rect;
if (TabBarController != null)
{
CGRect tabFrame = this.TabBarController.TabBar.Frame;
tabFrame.Height = tabSize;
tabFrame.Y = this.NavigationController != null ? 0 : 0;
this.TabBarController.TabBar.Frame = tabFrame;
this.TabBarController.TabBar.BarTintColor = UIColor.FromRGB(234,232,232);
var textAttr = new UITextAttributes
{
Font = UIFont.SystemFontOfSize(20)
};
var selectedAttr = new UITextAttributes
{
TextColor = UIColor.FromRGB(63,165,186),
Font=UIFont.BoldSystemFontOfSize(20)
};
foreach (var i in this.TabBarController.TabBar.Items)
{
i.SetTitleTextAttributes(textAttr, UIControlState.Normal);
i.SetTitleTextAttributes(selectedAttr, UIControlState.Selected);
}
}
}
}'

Related

How to show image over whole screen when clicked on?

I want to show image on whole screen if someone clicks on it. Image is loaded from database, just url of that image. How can i do that, code looks like this.
public void GetAllPlanes()
{
string _dbPath = Path.Combine(System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal), "myDB.db3");
var db = new SQLiteConnection(_dbPath);
for (int a = 1; a <= DatabaseNmbr(); a++)
{
var rowData = db.Table<Airplane>().FirstOrDefault(i => i.Id == a);
if (rowData.Plane != null && rowData.Airline != null && rowData.Registration != null && rowData.Registration != null && rowData.Airport != null && rowData.Url != null)
{
//vzhled
Frame cardFrame = new Frame
{
BackgroundColor = Color.FromHex("#00d2ff"),
CornerRadius = 30,
Margin = new Thickness(0, 60, 0, -20),
Content = new StackLayout
{
Children =
{
new Label {Text = "Plane " + a, TextColor = Color.White, HorizontalOptions = LayoutOptions.Center, FontSize = 30 },
new Image { Source = rowData.Url },
new Label {Text = "Plane:" + rowData.Plane, TextColor = Color.White, FontSize = 20 },
new Label {Text = "Airline:" + rowData.Airline, TextColor = Color.White, FontSize = 15 },
new Label {Text = "Livery:" + rowData.Livery, TextColor = Color.White, FontSize = 15 },
new Label {Text = "Registration:" + rowData.Registration, TextColor = Color.White, FontSize = 15 },
new Label {Text = "Airport:" + rowData.Airport, TextColor = Color.White, FontSize = 15 },
new Label {Text = "Date:" + rowData.Date, TextColor = Color.White, FontSize = 15 },
new Label {Text = "Comment:" + rowData.Comment, TextColor = Color.White, FontSize = 15}
}
}
};
Contenttest.Children.Add(cardFrame);
}
}
}
I want to show image on whole screen if someone clicks on it.
You can add TapGestureRecognizer to Image, when you Tap in Image, navigating to another to display entire image.
ContentPage1:
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
for (int i=0;i<4;i++)
{
Image image = new Image { Source = "https://aka.ms/campus.jpg", HeightRequest = 100, WidthRequest = 100 };
var tapGestureRecognizer = new TapGestureRecognizer();
// tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap
tapGestureRecognizer.Tapped += OnTapGestureRecognizerTapped;
image.GestureRecognizers.Add(tapGestureRecognizer);
Frame cardFrame = new Frame
{
CornerRadius = 30,
Content = new StackLayout
{
Children =
{
new Label {Text="Panel "+i, HorizontalOptions = LayoutOptions.Center, FontSize = 30 },
image
}
}
};
Contenttest.Children.Add(cardFrame);
}
}
private async void OnTapGestureRecognizerTapped(object sender, EventArgs e)
{
var imageSender = (Image)sender;
await Navigation.PushAsync(new Page2(imageSender.Source));
}
}
ContentPage2:
<StackLayout>
<Image
x:Name="image1"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
</StackLayout>
public partial class Page2 : ContentPage
{
public Page2(ImageSource source)
{
InitializeComponent();
image1.Source = source;
}
}

ScrollTo doesn't scroll

I ran into a curious problem: method ScrollTo doesn't work for the ListView inside root page initialized inside NavigationPage. The simple code:
public partial class MainPage : ContentPage
{
ListView listView;
public MainPage()
{
var abs = new AbsoluteLayout { };
var src = new List<string>();
for (int i = 0; i < 30; i++) { src.Add(i + 1 + " line"); }
abs.Children.Add(listView = new ListView { ItemsSource = src }, new Rectangle(0, 0, 1, 0.9), AbsoluteLayoutFlags.All);
abs.Children.Add(new Entry { BackgroundColor = Color.Gray }, new Rectangle(0, 1, 1, 0.1), AbsoluteLayoutFlags.All);
Content = abs;
}
protected override void OnAppearing()
{
base.OnAppearing();
var last = (listView.ItemsSource as List<string>).Last();
listView.ScrollTo(last, ScrollToPosition.End, false);
}
}
Here I try to scroll to the last element when the MainPage is loading. And that works fine if I has initialized App so:
public App ()
{
InitializeComponent();
MainPage = new App1.MainPage { Title = "Main" };
}
But if I put the MainPage inside NavigationPage, scrolling does not occur:
public App ()
{
InitializeComponent();
MainPage = new NavigationPage(new App1.MainPage { Title = "Main" });
}
What is the correct way to solve this?
PS: now I outflank this moment through Device.StartTimer, but I think this is wrong crutch

First tab icon not resizing iOS TabbedRenderer

I am working on iOS Tabs using custom TabbedRenderer, In renderer page I am resizing & setting icons. But for the first Tab icon not getting resized rest of all tabs setting icons fine.
public class CustomTabRenderer_iOS : TabbedRenderer
{
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
foreach (var item in TabBar.Items)
{
item.Image = GetTabIcon(item.Title);
}
}
private UIImage GetTabIcon(string title)
{
UITabBarItem item = null;
switch (title)
{
case "Dairy":
item = new UITabBarItem("Dairy", UIImage.FromFile("dairy"), 0);
break;
case "My kid":
item = new UITabBarItem("My kid",UIImage.FromFile("kid"),0);
break;
case "Events":
item = new UITabBarItem("Events", UIImage.FromFile("events"), 0);
break;
case "About":
item = new UITabBarItem("About", UIImage.FromFile("about"), 0);
break;
}
var img = (item != null) ? UIImage.FromImage(item.SelectedImage.CGImage, item.SelectedImage.CurrentScale, item.SelectedImage.Orientation) : new UIImage();
var imgR = ResizeImage(img, 20, 20);
return imgR;
}
public UIImage ResizeImage(UIImage sourceImage, float width, float height)
{
UIGraphics.BeginImageContext(new SizeF(width, height));
sourceImage.Draw(new RectangleF(0, 0, width, height));
var resultImage = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return resultImage;
}
}
Below is TabbedPage from PCL project
<Shared:MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:edTheSIS"
x:Class="edTheSIS.ParentDashboard"
xmlns:Shared="clr-namespace:edTheSIS.Shared;assembly=edTheSIS">
<local:DairyTabPage Icon="dairy" HeightRequest="10" WidthRequest="10" ></local:DairyTabPage>
<local:MykidTab Icon="kid" ></local:MykidTab>
<local:Events Icon="events"></local:Events>
<local:About Icon="about"></local:About>
</Shared:MyTabbedPage>
See below screenshot
second screenshot below
According to the iOS Human Interface Guidelines, the images should be sizes as shown in the table underneath for a tab bar.
If you size the icons accordingly, they should always show right. There would be no reason to resize in code.
When you still want to use the code to resize an icon, update your ViewWillLayoutSubviews method like this, also setting the SelectedImage property:
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
foreach (var item in TabBar.Items)
{
item.Image = GetTabIcon(item.Title);
item.SelectedImage = GetTabIcon(item.Title);
}
}
The tab bar icon size on iOS can be set with the UITabBarItem.ImageInset in a custom TabbedRenderer
[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace AppNameSpace.iOS.Renderers
{
class CustomTabbedPageRenderer : TabbedRenderer
{
public override void ViewDidLayoutSubviews()
{
base.ViewDidLayoutSubviews();
if (Element is TabbedPage)
if (TabBar?.Items != null)
foreach (var item in TabBar.Items)
item.ImageInsets = new UIEdgeInsets(16, 16, 16, 16);
}
}
}

Carousel Page Indicator

I have a Xamarin.Forms (1.4.2.6359) Project using Visual Studio 2013 and have created the carousel page below. I want to add page indicators, i.e. dots over top of the carousel page. Is this able to be done with the Xamarin Forms CarouselPage?
public class SplashPage : CarouselPage
{
public SplashPage ()
{
this.Children.Add(new CarouselChild("Logo.png", "Welcome"));
this.Children.Add(new CarouselChild("Settings.png", "Settings"));
}
}
class CarouselChild : ContentPage
{
public CarouselChild(string image, string text)
{
StackLayout layout = new StackLayout
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
};
layout.Children.Add(new Image
{
Source = image,
});
layout.Children.Add(new Label
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.EndAndExpand,
Text = text,
Scale = 2,
});
this.Content = layout;
}
}
Trying to keep things simple, what I did was:
MyCarouselPage:
class MyCarouselPage : CarouselPage
{
private int totalPages;
private int currentPage;
public MyCarouselPage()
{
var pages = GetPages();
totalPages = pages.Length;
this.ChildAdded += MyCarouselPage_ChildAdded;
for (int i = 0; i < totalPages; i++)
{
currentPage = i;
this.Children.Add(pages[i]);
}
}
void MyCarouselPage_ChildAdded(object sender, ElementEventArgs e)
{
var contentPage = e.Element as MyPageBase;
if (contentPage != null)
{
contentPage.FinalStack.Children.Add(new CarouselPageIndicator(currentPage, totalPages, "indicator.png", "indicator_emtpy.png"));
}
}
private MyPageBase[] GetPages()
{
var pages = new MyPageBase[] { new Page1(), new Page2() };
return pages;
}
}
The Base class for the Pages
class MyPageBase:ContentPage
{
public StackLayout FinalStack { get; set; }
}
CarouselPageIndicator
public class CarouselPageIndicator : StackLayout
{
public CarouselPageIndicator(int currentIndex, int totalItems, string sourceIndicator, string souceEmptyIndicator)
{
this.Orientation = StackOrientation.Horizontal;
this.HorizontalOptions = LayoutOptions.CenterAndExpand;
for (int i = 0; i < totalItems; i++)
{
var image = new Image();
if (i == currentIndex)
image.Source = sourceIndicator;
else
image.Source = souceEmptyIndicator;
this.Children.Add(image);
}
this.Padding = new Thickness(10);
}
}
And for the n-Pages
class Page1:MyPageBase
{
public Page1()
{
var layout = new StackLayout
{
Children = {
new Label{Text="Page 1"}
}
};
this.FinalStack = layout;
this.Content = FinalStack;
}
}
I was able to make a work around for the problem by hard coding the page indicators by changing CarouselChild method below:
public CarouselChild(string image, string text, int pageNumber, int pageCount)
{
var width = this.Width;
StackLayout layout = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Padding = new Thickness( 40, 40, 40, 40),
BackgroundColor = Color.Black,
};
layout.Children.Add(new Image
{
Source = image,
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.Center,
});
layout.Children.Add(new Label
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
Text = text,
FontSize = 36,
LineBreakMode = LineBreakMode.WordWrap,
});
layout.Children.Add(CarouselPageIndicator(pageNumber, pageCount));
this.Content = layout;
}
internal StackLayout CarouselPageIndicator(int pageNumber, int pageCount)
{
StackLayout layout = new StackLayout
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.EndAndExpand,
};
if (pageCount >= pageNumber)
{
for (int i = 1; i < pageCount + 1; i++)
{
if (i == pageNumber)
{
layout.Children.Add(new Image
{
Source = "Light.png",
});
}
else
{
layout.Children.Add(new Image
{
Source = "Dark.png",
});
}
}
}
return layout;
}

How do you get Canvas.SetTop to work on ItemsCollection items?

Below is the complete program (XAML and code behind). When started you will see:
When you click [Show/Hide] you see:
When you uncheck Home and Documents and click [Apply] you see:
As you can see, the Home and Documents folder disappear, but the other folders do not move up. Looking at the two list boxes you see three items per line, folder label, the value for Canvas.SetTop, and True: Visibility.Visible or False: Visibility.Collapsed. The Original Placement list box are the original values. Each time you click [Apply] the New Placement List box shows that new values. The Visibility value gets applied and the result is visible, either the folder is there or it is not. However, applying the Canvas.SetTop does not work. And you can see that the values have changed for the Canvas.SetTop. And, if you look at the code, you see that it is applied to the same UIElement as the Visibility is applied to:
var f = Me[i];
Canvas.SetTop(iec, f.Top); // Why does this not work and
iec.Visibility = f.FolderVisible; // this does work?
I need the folders that are visible to move up to take the place of those that are collapsed. Canvas.SetTop is not working. How can I get the Folders to move?
Here is the Solution Explorer pane so that you know what is needed:
Here is the XAML:
<Window x:Class="FolderTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:FolderTest"
Title="Folder Test"
Width="450"
Height="410">
<Grid Margin="10">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<!-- Folder Show/Hide Button -->
<Button Name="FolderOptions" Content="Show/Hide" FontSize="8" FontWeight="Bold" Width="50" Height="20" Margin="116, 0, 0, 0" Click="Event_ShowHide_ButtonClick" />
<!-- Folders -->
<Grid>
<Canvas Name="xFolders"
Width="170"
Height="309"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="0,10,0,0">
<Canvas.Resources>
<local:Folders x:Key="myFolders" />
</Canvas.Resources>
<ItemsControl ItemsSource="{Binding Source={StaticResource myFolders}}">
<ItemsControl.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
</DataTemplate.Resources>
<Canvas Name="FolderCanvas"
Tag="{Binding Path=Number}"
Visibility="{Binding Path=FolderVisible}">
<Path Data="{Binding Path=FolderPath}"
Stroke="{Binding Path=Brush}"
Fill="{Binding Path=Brush}"/>
<StackPanel Orientation="Horizontal"
Canvas.Left="5"
Canvas.Top="2">
<TextBlock Text="{Binding Path=Label}"
FontSize="12"
Margin="20, 0, 0, 0" />
</StackPanel>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Top"
Value="{Binding Top}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Canvas>
</Grid>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="10, 0, 0, 0">
<TextBlock Text="Original Placemet:" />
<ListBox Name="OriginalPlacement" />
<Button Name="Refresh" Content="New Placemet:" Margin="0, 10, 0, 0" Click="Event_OriginalPlacement_ButtonClick" />
<ListBox Name="NewPlacement" />
</StackPanel>
</StackPanel>
</Grid>
</Window>
Here is the C# Code Behind:
using System;
using System.Collections.Generic;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows;
using System.Collections.ObjectModel;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
namespace FolderTest
{
public struct GD
{
public static MainWindow MainWindow = null;
public static Button Refresh = null;
}
public partial class MainWindow : Window
{
public MainWindow()
{
GD.MainWindow = this;
InitializeComponent();
Loaded += new RoutedEventHandler(MainWindow_Loaded);
}
void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
GD.Refresh = Refresh;
Folders.Placement(ref OriginalPlacement);
}
private void Event_ShowHide_ButtonClick(object sender, RoutedEventArgs e)
{
var pu = Folders.FolderShowPopUp();
pu.PlacementTarget = FolderOptions;
pu.IsOpen = true;
}
private void Event_OriginalPlacement_ButtonClick(object sender, RoutedEventArgs e)
{
Folders.Placement(ref NewPlacement);
}
}
public class Folder
{// Specification for each folder tab seen on the left.
public int Number { get; set; } // Folder sequence number top to bottom starging with 1.
public string Label { get; set; } // The label that appears on the folder tab itself.
public double Top { get; set; } // Position of the upper left corner of this folder.
public SolidColorBrush Brush { get; set; } // Solid Color Brush.
public string FolderPath { get; set; } // Contains the geometric path to draw this folder and its tab.
public Visibility FolderVisible { get; set; } // This folder's Show/Hide flag.
public Folder(int Number, string Label, double Top, SolidColorBrush Brush, string FolderPath, Visibility FolderVisible)
{
this.Number = Number;
this.Label = Label;
this.Top = Top;
this.Brush = Brush;
this.FolderPath = FolderPath;
this.FolderVisible = FolderVisible;
}
}
public class Folders : ObservableCollection<Folder>
{
public static ObservableCollection<Folder> Me = null;
private static string[] Labels = new string[]
{
"Personal",
"Health",
"Finances",
"Home",
"Employment",
"Insurance",
"Documents",
"Contacts",
"Journal"
};
private static Dictionary<string, Tuple<bool, bool>> LabelData = new Dictionary<string, Tuple<bool, bool>>()
{// Label Show Hidable
{Labels[0], new Tuple<bool, bool>(true, false)},
{Labels[1], new Tuple<bool, bool>(true, true)},
{Labels[2], new Tuple<bool, bool>(true, true)},
{Labels[3], new Tuple<bool, bool>(true, true)},
{Labels[4], new Tuple<bool, bool>(true, true)},
{Labels[5], new Tuple<bool, bool>(true, true)},
{Labels[6], new Tuple<bool, bool>(true, true)},
{Labels[7], new Tuple<bool, bool>(true, false)},
{Labels[8], new Tuple<bool, bool>(true, true)}
};
private static string[] FolderColors = new string[]
{
"FF36579E",
"FFDF2024",
"FF16A146",
"FF00B2D4",
"FFF47B20",
"FF9F1F63",
"FF13A89E",
"FFB7B7E7",
"FF50CAF5",
"FFAA9E74",
"FF86787D",
"FF36D146",
};
private static byte[] ARGBColor = new byte[4]; // Byte array for the folder top color.
private static void ColorString2ARGB(ref byte[] bytes, string Hex)
{// Converts 8 char hex string to 4 byte array.
for (int i = 0; i < 8; i += 2)
bytes[i / 2] = Convert.ToByte(Hex.Substring(i, 2), 16);
}
private static int colorIndex = -1; // Initial value of the colorIndex.
private static string NextColor()
{// Returns a 8 char string containing the next top FolderColor. If at end, cycle to beginning.
colorIndex++;
if (colorIndex >= FolderColors.Length) colorIndex = 0;
return FolderColors[colorIndex];
}
private class FolderShow
{
public string Label { get; set; }
public bool Show { get; set; }
public bool Hidable { get; set; }
public FolderShow(string label, bool show, bool hidable)
{
Label = label;
Show = show;
Hidable = hidable;
}
}
private static List<FolderShow> FolderShowList = null;
public static Popup FolderShowPopUp()
{
var pu = new Popup()
{
Placement = PlacementMode.Right,
AllowsTransparency = true,
StaysOpen = false
};
var b = new Border()
{
BorderThickness = new Thickness(2),
BorderBrush = new SolidColorBrush() { Color = Colors.Black },
CornerRadius = new CornerRadius(5),
Background = new SolidColorBrush() { Color = Colors.White }
};
var sp = new StackPanel()
{
Orientation = Orientation.Vertical,
Margin = new Thickness(10)
};
var tb = new TextBlock()
{
Text = "Checked Folders will be Displayed: ",
FontSize = 16,
FontWeight = FontWeights.Bold,
};
sp.Children.Add(tb);
foreach (var fs in FolderShowList)
{
var cb = new CheckBox()
{
Content = fs.Label,
IsChecked = fs.Show,
IsEnabled = fs.Hidable,
FontSize = 14,
FontWeight = FontWeights.Bold,
Margin = new Thickness(0, 5, 0, 0)
};
cb.Click += new RoutedEventHandler(Event_CheckBoxFolderList_Click);
sp.Children.Add(cb);
}
var bp = new StackPanel()
{
Orientation = Orientation.Horizontal,
Margin = new Thickness(0, 5, 0, 0)
};
var ba = new Button() { Content = "Apply", Width = 50, Height = 25, BorderBrush = new SolidColorBrush(Colors.Transparent), Tag = pu };
ba.Click += new RoutedEventHandler(Event_ApplyFolderList_Click);
bp.Children.Add(ba);
var bc = new Button() { Content = "Cancel", Width = 50, Height = 25, BorderBrush = new SolidColorBrush(Colors.Transparent), Tag = pu, Margin = new Thickness(7, 0, 0, 0) };
bc.Click += new RoutedEventHandler(Event_CancelFolderList_Click);
bp.Children.Add(bc);
sp.Children.Add(bp);
var tbm = new TextBlock()
{
Text = "Disabled folders cannot be hidden.",
Margin = new Thickness(0, 5, 0, 0),
FontSize = 12,
Foreground = new SolidColorBrush() { Color = Colors.Red }
};
sp.Children.Add(tbm);
b.Child = sp;
pu.Child = b;
return pu;
}
private static void Event_CheckBoxFolderList_Click(object sender, RoutedEventArgs e)
{
var cb = (CheckBox)e.Source;
foreach (var fs in FolderShowList)
{
if (fs.Label == cb.Content as string)
{
fs.Show = (bool)cb.IsChecked;
break;
}
}
}
private static void Event_CancelFolderList_Click(object sender, RoutedEventArgs e)
{
((Popup)((Button)e.Source).Tag).IsOpen = false;
}
private static void Event_ApplyFolderList_Click(object sender, RoutedEventArgs e)
{
foreach (var fs in FolderShowList)
{
var sh = LabelData[fs.Label];
LabelData[fs.Label] = new Tuple<bool, bool>(fs.Show, sh.Item2);
}
((Popup)((Button)e.Source).Tag).IsOpen = false;
int p = 0;
foreach (var f in Me)
{
var fs = LabelData[f.Label].Item1 == true;
f.Top = p * folderPositionFactor;
f.FolderVisible = fs ? Visibility.Visible : Visibility.Collapsed;
if (fs) p += 1;
}
foreach (ItemsControl ic in GD.MainWindow.xFolders.Children)
{
for (int i = 0; i < ic.Items.Count; i++)
{
var ie = (UIElement)ic.ItemContainerGenerator.ContainerFromIndex(i);
var iec = Controls.FindChildByType<Canvas>(ie, "FolderCanvas");
if (iec != null)
{
var f = Me[i];
Canvas.SetTop(iec, f.Top); // Why does this not work and
iec.Visibility = f.FolderVisible; // this does work?
}
}
break;
}
GD.Refresh.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));
}
public static void Placement(ref ListBox lb)
{
lb.Items.Clear();
foreach (ItemsControl ic in GD.MainWindow.xFolders.Children)
{
for (int i = 0; i < ic.Items.Count; i++)
{
var ie = (UIElement)ic.ItemContainerGenerator.ContainerFromIndex(i);
var iec = Controls.FindChildByType<Canvas>(ie, "FolderCanvas");
if (iec != null)
{
var f = Me[i];
lb.Items.Add(f.Label + ": " + f.Top.ToString() + ", " + (f.FolderVisible == Visibility.Visible ? "True" : "False"));
}
}
break;
}
}
public Folders()
{// The constructor, initializes itself by creating a folder for each label in Labels
FolderShowList = new List<FolderShow>();
for (int i = 0; i < Labels.Length; i++)
{
string n = Labels[i];
bool h = LabelData[Labels[i]].Item2;
bool s = h == true ? LabelData[Labels[1]].Item1 == true : true;
FolderShowList.Add(new FolderShow(n, s, h));
}
SetFolders();
Me = this;
}
const double folderPositionFactor = 31; // 21.80;
public void SetFolders()
{
SolidColorBrush[] scb = new SolidColorBrush[Labels.Length]; // Hold the linear solid color brush to assign to the folder.
Color[] pointerColor = new Color[Labels.Length]; // Hold the color to assign to the folder's solid color brush.
for (int i = 0; i < Labels.Length; i++)
{// Create a solid color brush for each folder.
ColorString2ARGB(ref ARGBColor, NextColor()); // Color into byte array.
Color TmpColor = Color.FromArgb(ARGBColor[0], ARGBColor[1], ARGBColor[2], ARGBColor[3]); // Create top color.
pointerColor[i] = TmpColor;
SolidColorBrush TmpSCB = new SolidColorBrush() { Color = TmpColor };
scb[i] = TmpSCB; // Assign the solid color brush.
}
// All is ready to create the individual folders.
const string folderHeight = "56"; // "44";
Brush FontColor = Brushes.Black; // Initial font color for labels.
string fp = "M0,7 A7,7 90 0 1 7,0 L100,0 105,18 150,18 150,FH 0,FH Z".Replace("FH", folderHeight); // Initial geometric path for folder design.
int afp = 0; // Actual Folder Position.
for (int i = 0; i < Labels.Length; i++)
{// Create the individual folders.
bool fs = FolderShowList[i].Show;
Add(new Folder(
i + 1, // Folder sequence count.
Labels[i], // Folder label.
afp * folderPositionFactor, // Position of top of folder.
scb[i % scb.Length], // Solid color brush.
fp, // Geometric path for folder design.
fs ? Visibility.Visible : Visibility.Collapsed // User Hidden.
)
);
if (fs) afp += 1;
if (i == 0)
{// First folder created, now set values for remaining folders.
FontColor = Brushes.White;
fp = "M0,25 A7,7 90 0 1 7,18 L13,18 18,0 100,0 105,18 150,18 150,FH 0,FH Z".Replace("FH", folderHeight);
}
}
}
}
public static class Controls
{
public static T FindChildByType<T>(DependencyObject parent, string childName) where T : DependencyObject
{
if (parent == null) return null; // No parent, get out of here.
T foundChild = null;
int childrenCount = VisualTreeHelper.GetChildrenCount(parent);
for (int i = 0; i < childrenCount; i++)
{
var child = VisualTreeHelper.GetChild(parent, i);
// If the child is not of the request child type child
T childType = child as T;
if (childType == null)
{
// recursively drill down the tree
foundChild = FindChildByType<T>(child, childName);
// If the child is found, break so we do not overwrite the found child.
if (foundChild != null) break;
}
else if (!string.IsNullOrEmpty(childName))
{
var frameworkElement = child as FrameworkElement;
// If the child's name is set for search
if (frameworkElement != null && frameworkElement.Name == childName)
{
// if the child's name is of the request name
foundChild = (T)child;
break;
}
}
else
{
// child element found.
foundChild = (T)child;
break;
}
}
return foundChild;
}
}
}
Thanks for any help that you can provide.
I finally figured out the answer, and it is very simple.
This is the code to be changed (the center line only):
var f = Me[i];
Canvas.SetTop(iec, f.Top); // Why does this not work
iec.Visibility = f.FolderVisible; // and this does work?
This is the new code (only the center line is changed, actually, only one character is removed):
var f = Me[i];
Canvas.SetTop(ie, f.Top);
iec.Visibility = f.FolderVisible;
That is, change Canvas.SetTop(iec, f.Top); to Canvas.SetTop(ie, f.Top); that is, only change iec to ie and all works fine.

Categories

Resources