Tab view not working right on UWP Windows UI Library - c#

I am making an app for UWP on Visual Studio that uses the Windows UI Library for the tab view component. I was following the documentation and it gives the following code to use:
xaml:
<muxc:TabView AddTabButtonClick="TabView_AddTabButtonClick" TabCloseRequested="TabView_TabCloseRequested"/>
c#:
// Add a new Tab to the TabView
private void TabView_AddTabButtonClick(muxc.TabView sender, object args)
{
var newTab = new muxc.TabViewItem();
newTab.IconSource = new muxc.SymbolIconSource() { Symbol = Symbol.Document };
newTab.Header = "New Document";
// The Content of a TabViewItem is often a frame which hosts a page.
Frame frame = new Frame();
newTab.Content = frame;
frame.Navigate(typeof(Page1));
sender.TabItems.Add(newTab);
}
// Remove the requested tab from the TabView
private void TabView_TabCloseRequested(muxc.TabView sender, muxc.TabViewTabCloseRequestedEventArgs args)
{
sender.TabItems.Remove(args.Tab);
}
I added that code to my project and and at first glance it looks normal.
However when try to interact, there are problems. I can only create a new tab if I click at the very bottom edge of the " + " icon. I also cant exit any tabs or interact with them.Here's a gif of my problem:
https://im7.ezgif.com/tmp/ezgif-7-565b1f0b4531.gif
Does anybody have a fix for this?
Thanks for any help

You need to create a TabStripHeader and TabStripFooter.
TabStripHeader's children is Grid and set name it to ShellTitlebarInset,
TabStripFooter's children is Grid and set name it to CustomDragRegion
and set background to Transparent for both.
Use CustomDragRegion as Title Bar.
Like Example:-
<muxc:TabView>
<muxc:TabView.TabStripHeader>
<Grid x:Name="ShellTitlebarInset" Background="Transparent" />
</muxc:TabView.TabStripHeader>
<muxc:TabView.TabStripFooter>
<Grid Grid.Column="3" x:Name="CustomDragRegion" Background="Transparent" />
</muxc:TabView.TabStripFooter>
</muxc:TabView>
And C# Example:-
public MainPage()
{
this.InitializeComponent();
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
Window.Current.SetTitleBar(CustomDragRegion);
}
private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
if (FlowDirection == FlowDirection.LeftToRight)
{
CustomDragRegion.MinWidth = sender.SystemOverlayRightInset;
ShellTitlebarInset.MinWidth = sender.SystemOverlayLeftInset;
}
else
{
CustomDragRegion.MinWidth = sender.SystemOverlayLeftInset;
ShellTitlebarInset.MinWidth = sender.SystemOverlayRightInset;
}
CustomDragRegion.Height = ShellTitlebarInset.Height = sender.Height;
}
Note: To ensure that the tabs in the title bar are not occluded by shell content, you must account for left and right overlays. In LTR layouts, the right inset includes the caption buttons and the drag region. The reverse is true in RTL. The SystemOverlayLeftInset and SystemOverlayRightInset values are in terms of physical left and right, so reverse these too when in RTL.
Click Here for More Information

Related

Windows Lock Screen, add Text programmatically

I want to display custom text or control on the Windows 10 Lockscreen, when I click on a button. I tried it with an UWP Application.
My goal is something like this:
And the Code I tried:
ToastContent content = new ToastContent()
{
//Duration = ToastDuration.Long,
Scenario = ToastScenario.Reminder,
Visual = new ToastVisual()
{
BindingGeneric = new ToastBindingGeneric()
{
Attribution = new ToastGenericAttributionText()
{
Text = "Hello World"
}
}
},
Actions = new ToastActionsCustom()
{
Buttons = {
new ToastButton ("mycontent", "myargs")
}
}
};
var notification = new ToastNotification(content.GetXml());
ToastNotificationManager.CreateToastNotifier().Show(notification);
Also I saw this post and tried it of course, but it wasnt helpfull: Windows Lock Screen display text programmatically C#
Maybe you could help me to achive my goald
I thank you in advance
The screenshot you post above is smtc that used to show current playing music, for enable it you need to enable the app Background Media Playback, but it only use to show the media info, it can't use to share custom info like you mentioned scenario.
For your scenario, the better way is register your app LockScreen capability like the following.
<Applications>
<Application Id="App"
Executable="$targetnametoken$.exe"
EntryPoint="xxxxx.UWP.App">
.......
<uap:LockScreen BadgeLogo="Assets\BadgeLogo.png" Notification="badgeAndTileText"/>
</uap:VisualElements>
</Application>
</Applications>
And set the app as main toast in the lock screen Setting page -> Personalization -> lock screen -> Choose one app to show detailed status on the lock screen If you have resisted the app, it will show in the apps list.
Code Sample
private void Button_Click(object sender, RoutedEventArgs e)
{
TileContent content = new TileContent()
{
Visual = new TileVisual()
{
LockDetailedStatus1 = "Hello world",
TileWide = new TileBinding() { }
}
};
var notification = new TileNotification(content.GetXml());
TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);
}

Expander menu in C #

I am trying to reproduce the operation of the Control Expander WPF, or as shown in the menu of Outlook, Vertical Web Menu etc., since in WindowsForms this control does not exist. Here I leave the sample code: Menu_Expader.zip link GoogleDrive.
I have managed to do it using the following controls:
Panels
FlowLayoutPanel
1 Time Control
Button Vectors
Labels Vectors ...
This works perfectly, but it happens that to each panel I must establish a
Maximum Size and Minimum Size therefore every time I add an item inside I must modify the size of the panel where I add it, and the item are very close to each other is a bit annoying for the user's vision.
Example this is what I currently have:
EDIT
Code Sample:
// The state of an expanding or collapsing panel.
private enum ExpandState
{
Expanded,
Expanding,
Collapsing,
Collapsed,
}
// The expanding panels' current states.
private ExpandState[] ExpandStates;
// The Panels to expand and collapse.
private Panel[] ExpandPanels;
// The expand/collapse buttons.
private Button[] ExpandButtons;
// Initialize.
private void Form1_Load(object sender, EventArgs e)
{
// Initialize the arrays.
ExpandStates = new ExpandState[]
{
ExpandState.Expanded,
ExpandState.Expanded,
ExpandState.Expanded,
};
ExpandPanels = new Panel[]
{
panModule1,
panModule2,
panModule3,
};
ExpandButtons = new Button[]
{
btnExpand1,
btnExpand2,
btnExpand3,
};
// Set expander button Tag properties to give indexes
// into these arrays and display expanded images.
for (int i = 0; i < ExpandButtons.Length; i++)
{
ExpandButtons[i].Tag = i;
ExpandButtons[i].Image = Properties.Resources.expander_down;
}
}
// Start expanding.
private void btnExpander_Click(object sender, EventArgs e)
{
// Get the button.
Button btn = sender as Button;
int index = (int)btn.Tag;
// Get this panel's current expand
// state and set its new state.
ExpandState old_state = ExpandStates[index];
if ((old_state == ExpandState.Collapsed) ||
(old_state == ExpandState.Collapsing))
{
// Was collapsed/collapsing. Start expanding.
ExpandStates[index] = ExpandState.Expanding;
ExpandButtons[index].Image = Properties.Resources.expander_up;
}
else
{
// Was expanded/expanding. Start collapsing.
ExpandStates[index] = ExpandState.Collapsing;
ExpandButtons[index].Image = Properties.Resources.expander_down;
}
// Make sure the timer is enabled.
tmrExpand.Enabled = true;
}
// The number of pixels expanded per timer Tick.
private const int ExpansionPerTick = 7;
// Expand or collapse any panels that need it.
private void tmrExpand_Tick(object sender, EventArgs e)
{
// Determines whether we need more adjustments.
bool not_done = false;
for (int i = 0; i < ExpandPanels.Length; i++)
{
// See if this panel needs adjustment.
if (ExpandStates[i] == ExpandState.Expanding)
{
// Expand.
Panel pan = ExpandPanels[i];
int new_height = pan.Height + ExpansionPerTick;
if (new_height >= pan.MaximumSize.Height)
{
// This one is done.
new_height = pan.MaximumSize.Height;
}
else
{
// This one is not done.
not_done = true;
}
// Set the new height.
pan.Height = new_height;
}
else if (ExpandStates[i] == ExpandState.Collapsing)
{
// Collapse.
Panel pan = ExpandPanels[i];
int new_height = pan.Height - ExpansionPerTick;
if (new_height <= pan.MinimumSize.Height)
{
// This one is done.
new_height = pan.MinimumSize.Height;
}
else
{
// This one is not done.
not_done = true;
}
// Set the new height.
pan.Height = new_height;
}
}
// If we are done, disable the timer.
tmrExpand.Enabled = not_done;
}
I want to get a result similar to this - Bootstrap Menu Accordion:
 
Imitate that operation panels expand according to the quantity of item that it contains as long as it does not protrude from the screen, in which case it will show the scroll bar. I know there are software that provide custom controls like DVexpress, DotNetBar Suite among others, but they are Licensed Software I do not want to use it illegally pirate. Can you help me optimize it or create it in another way?
Environment: Visual Studio 2010 & .NET NetFramework 4.
The original question I made it in StackOverFlow in Spanish.
Modulo (Module)
Menu Principal (Main menu)
Mantenimientos (Maintenance)
Procesos (Processes)
Consultas (Queries)
Reportes (Reports)
Note: If someone speaks Spanish and English and can do a better translation, please edit the question. (Excuse the advertising on the image, I recorded the screen with a software trial version).

How to make the Drawer of RadSideDrawer cover the full page

I am using a telerik SizeDrawer control for UWP. and in it I want the drawer content to cover full page when it opens. So I tried to bind to Actual-Width of the page but that didn't work and then I tried to register it with sizeChanged event but width of drawer content still remains 0. unless I explicitly define it to some value like 300 then it remains 300 but I want it to cover full screen.
CODE
<telerik:RadSideDrawer Name="MainDrawer" SizeChanged="MainDrawer_SizeChanged"
Loaded="MainDrawer_Loaded">
<telerik:RadSideDrawer.MainContent>
<Grid />
</telerik:RadSideDrawer.MainContent>
<telerik:RadSideDrawer.DrawerContent>
<Grid Name="DrawerGrid" Background="Yellow">
</Grid>
</telerik:RadSideDrawer.DrawerContent>
</telerik:RadSideDrawer>
C#
private void MainDrawer_SizeChanged(object sender, SizeChangedEventArgs e)
{
DrawerGrid.Width = e.NewSize.Width;
}
private void MainDrawer_Loaded(object sender, RoutedEventArgs e)
{
DrawerGrid.Width = MainDrawer.Width;
}
Note that height of drawer grid is alright and stretches to full screen but width remains 0 and if width is untouched totally then it is 240 fixed.
This is how you do it -
First, define a double property that gets the width of the current Window.
public double WindowWidth => Window.Current.Bounds.Width;
Then use it as a one-time binding source for the DrawerLength of your RadSideDrawer.
<primitives:RadSideDrawer x:Name="MainDrawer"
DrawerLength="{x:Bind WindowWidth}" ... />
Finally, update the DrawerLength whenever the size of the MainDrawer gets updated.
private void MainDrawer_SizeChanged(object sender, SizeChangedEventArgs e) =>
MainDrawer.DrawerLength = e.NewSize.Width;
Also note if you don't feel like doing bindings, you can replace the first two steps with one line of code, right after InitializeComponent();
MainDrawer.DrawerLength = Window.Current.Bounds.Width;
Update
Looks like when the drawer is collapsed, the control itself resets its Opacity back to 1, and then when you constantly update the DrawerLength, the edge of the drawer could come out and give a bad user experience.
You can try to throttle page size changes with Reactive Extensions, or you can simply set the Opacity of the drawer back to 0 when it's collapsed.
To do this, you just need to monitor the DrawerState property and when it's Closed, set the DrawerGrid.Opacity to 0.
But remember you will also need to set it back to 1 before it gets expanded. Unfortunately there isn't an Opening state and Opened fires too late, so you have to locate the menu button and do it inside its Click event.
public MainPage()
{
InitializeComponent();
MainDrawer.DrawerLength = Window.Current.Bounds.Width;
Loaded += (s, e) =>
{
// GetChildByName: https://github.com/JustinXinLiu/Continuity/blob/master/Continuity/Extensions/UtilExtensions.cs#L44
var menuButton = MainDrawer.GetChildByName<Button>("PART_SideDrawerButton");
menuButton.Click += (s1, e1) => DrawerGrid.Opacity = 1;
};
MainDrawer.RegisterPropertyChangedCallback(RadSideDrawer.DrawerStateProperty, (s, e) =>
{
var state = MainDrawer.DrawerState;
if (state == DrawerState.Closed)
{
DrawerGrid.Opacity = 0;
}
});
}

WPF: Switching window styles

I have a program that has some buttons, one of them is used to switch "Themes".
There are two themes, one is the normal Windows theme and the other is called Style2.
This is how I tried the switching
private bool UsingWindowsStyle = true;
private ResourceDictionary Style2= new ResourceDictionary() { Source = new Uri("/...;component/Resources/DefaultStyles.xaml", UriKind.RelativeOrAbsolute) };
private void SwitchButton_Click(object sender, RoutedEventArgs e)
{
if (UsingWindowsStyle)
{
Resources.MergedDictionaries.Add(Style2);
UsingWindowsStyle = false;
}
else
{
Resources.MergedDictionaries.Remove(Style2);
UsingWindowsStyle = true;
}
}
My problem is, when I use this program, and press this Button, this is what happens:
Window Opened Program operating normally with Windows theme.
SwitchButton First Click Program changes visuals to the Style2 theme. All the program's buttons operating normally.
SwitchButton Second Click Program reverts back to Windows theme, but all the buttons in the program seize to work.
Points to Consider
The program does not throw any exceptions at this point.
Debugging the code, it seems that after the second click, the program does not enter the SwitchButton_Click method.
I tried readding the Click EventHandler but with no use.
SwitchButton.Click += new RoutedEventHandler(SwitchButton_Click);
Thanks in advance for your help.
I would suggest that you are trying too hard. All you need to do is to change the Style on the Window itself. Leave the dictionaries alone. :-)
Here is an example that changes a windows style when you click from the list of available styles.
My command boils down to
//Here I am changing the style on the window
NewWindow.Style = ((StyleDetailsViewModel)x).Style;
NewWindow.Show();
with various input data
public StylingViewModel(Func<string, Style> findStyle)
{
Styles = new StyleDetailsViewModel[]
{
new StyleDetailsViewModel
{
Name = "None",
Description = "Completely remove all styling and show the raw NavigationWindow including default navigation elements",
WindowStyleNone = false,
Image = "\\Resources\\WindowStyleNone.png"
},
new StyleDetailsViewModel
{
Name = "PlainWindow",
Style = findStyle("PlainWindow"),
Description = "Hides the navigation elemetns of the NavigationWindow to make it look just like a normal window",
WindowStyleNone = false,
Image = "\\Resources\\WindowStylePlain.png"
},
new StyleDetailsViewModel
{
Name = "Windows 7",
Style = findStyle("Win7NavigationWindow"),
Description = "Uses glass effects to create a window that looks almost identical to the control panel from Windows 7.",
WindowStyleNone = false,
Image = "\\Resources\\WindowStyleWin7Nav.png"
},
and
this.DataContext = new StylingViewModel(x => (Style)this.FindResource(x));
Also beware of certain Window properties that can only be set before the window opens, such as WindowStyle="None" which you need if you are doing custom chrome.

Adding a collapsible panel in outlook

I'm writing an outlook add-in and I'm looking for a way to make a panel docked on the right of my screen collapsible. At the moment the panel is either displayed or removed. You can also scale it but that's not what I'm looking for. I already tried adding 2 buttons which change the width of my panel onclick but the result is that my panel can't get smaller than about 60px in width and the title is still there. Here is the code I use to add my pane:
Microsoft.Office.Tools.CustomTaskPane ctp;
private HistoryPane ctrl;
string title = "Task History";
ctrl = new HistoryPane(mailItem);
ctp = Globals.ThisAddIn.CustomTaskPanes.Add(ctrl, title);
ctp.Visible = true;
ctp.Width = 460;
ctp.DockPosition = Microsoft.Office.Core.MsoCTPDockPosition.msoCTPDockPositionRight;
Any help to either remove the title, make the panel thinner (about 25px), make it collapsible or all of them would be much appreciated.
here is solution below:
1 - Create a public method in your user control like below:
private Microsoft.Office.Tools.CustomTaskPane _ctp;
public void SetControl(ref Microsoft.Office.Tools.CustomTaskPane ctp)
{
_ctp = ctp;
}
2 - Add any button to Expend and Minimize in your User Control and put below codes on Minimize button on click event:
private void btnMinimize_Click(object sender, EventArgs e)
{
_ctp.DockPosition = Microsoft.Office.Core.MsoCTPDockPosition.msoCTPDockPositionTop;
_ctp.Height = 50;
}
3 - After your code above use bold line code below:
Microsoft.Office.Tools.CustomTaskPane ctp;
private HistoryPane ctrl;
string title = "Task History";
ctrl = new HistoryPane(mailItem);
ctp = Globals.ThisAddIn.CustomTaskPanes.Add(ctrl, title);
ctp.Visible = true;
ctp.Width = 460;
ctp.DockPosition = Microsoft.Office.Core.MsoCTPDockPosition.msoCTPDockPositionRight;
ctrl.SetControl(ref ctp);
Hope this will work.

Categories