Close HamburgerMenu with slide gesture - c#

I'm trying to implement a slide gesture to open/close the hamburguer menu control, but I'm having trouble closing the menu with version 1.5.1 of the control. With version 1.4.1 I close the menu this way:
var paneGrid = HamburgerMenu.FindDescendantByName("PaneGrid") as Grid;
paneGrid.ManipulationMode = ManipulationModes.TranslateX;
paneGrid.ManipulationCompleted += OnPaneGridManipulationCompleted;
private void OnPaneGridManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e) {
if (e.Cumulative.Translation.X < -50) {
HamburgerMenu.IsPaneOpen = false;
}
}
But with version 1.5.1 the listviews take all space in the control and "OnPaneGridManipulationCompleted" does not get fired... any ideas please?

You can try setting both HorizontalScrollMode and VerticalScrollMode to Disabled on the ListView's inner ScrollViewer to let touch input bypass it.
Since the default value of HorizontalScrollMode is already Disabled. You just need to manually set the VerticalScrollMode as below
if (HamburgerMenuControl.FindDescendantByName("ButtonsListView") is ListView listView)
{
ScrollViewer.SetVerticalScrollMode(listView, ScrollMode.Disabled);
}
The side effect is that you can no longer scroll the ListView vertically. But generally you wouldn't want that(bad design) anyway.
You might also be interested in this answer of mine. :)

Related

UWP CustomRenderer for Checkbox: Pointer over Checkbox changes style?

I'm working with Xamarin.Forms and I made a CustomRenderer for Checkbox in UWP. When I set all the Checkboxes of my items in the ListView to true by clicking the button "Alle", the Checkboxes are displayed correctly with the check inside the box:
However, if I hover my mouse over the Checkboxes, they immediately change their appearence (the check disappears but it's still selected). In the following screenshot, I moved my cursor over the 3rd - 7th Checkboxes:
This is my overridden OnElementChanged method in the CustomRenderer:
protected override void OnElementChanged(ElementChangedEventArgs<EvaCheckbox> e)
{
base.OnElementChanged(e);
var model = e.NewElement;
if (model == null)
{
return;
}
nativeCheckbox = new CheckBox();
CheckboxPropertyChanged(model, null);
model.PropertyChanged += OnElementPropertyChanged;
nativeCheckbox.Checked += (object sender, Windows.UI.Xaml.RoutedEventArgs eargs) =>
{
model.IsChecked = (bool)nativeCheckbox.IsChecked;
};
nativeCheckbox.Unchecked += (object sender, Windows.UI.Xaml.RoutedEventArgs eargs) =>
{
model.IsChecked = (bool)nativeCheckbox.IsChecked;
};
SetNativeControl(nativeCheckbox);
}
I tried to override the PointerEntered event of nativeCheckbox. It works, for example if I set the model.IsChecked to true on this event, it will be set to true:
nativeCheckbox.PointerEntered += (s, args) =>
{
model.IsChecked = true;
};
But I don't know how to (if even at this place) prevent the checkbox from changing it's appearance when moving the cursor above the Checkbox. Just leaving the triggered event with empty code like this won't change anything about the described behaviour:
nativeCheckbox.PointerEntered += (s, args) => { };
How can I prevent the Checkbox from changing it's appearance when I move my cursor over it?
Update:
I've created a sample project for this issue. You can find the repository here: https://github.com/Zure1/CustomCheckbox
It has the exact same described behavior. In the following screenshot I pressed the button "All" on the bottom of the screen and then the checkboxes look like correct with a check inside of them:
After moving the mouse cursor over the bottom 3 checkboxes, their change their appearance:
Information: I'm debugging on my desktop (Windows 10). I don't know if this issue exists on WinPhone. Just in case you're wondering why my checkboxes are red: My system color in Windows is red.
This is a tricky one as I have been struggling with this issue for a while, I'll try my best to answer this.
TL;DR: It's caused by ViewCell.
The issue comes down to Xamarin Forms ListView and ViewCell.
I haven't been able to track down the cause yet for many months and the way I get around this issue is by refreshing the ListView every time a change happens forcing a redraw of the entire ListView which can really impact performance.
My educated guess on what the cause could be is the rendering code for the ViewCell is missing something.
As for your particular issue, I have created a CheckBoxCell which you can use to display a list of checkboxes with a title. I forked your project and made the changes.
This will display something similar to what you are trying to achieve and doesn't have rendering issues so will be a good starting point. You are able to customize this to display images and the like but you'll have to do that in the platform-specific layout code.
Please note that I have only created the code for UWP and that should be enough to get you going for the other platforms.
I hope this helps somewhat.

c# - Manually scroll Control with AutoScroll=true

I have a Panel with AutoScroll=true. I'd like to manually scroll the panel's VerticalScroll. I've tried both setting VerticalScroll.Value and Panel.ScrollControlIntoView(...).
However, both cases yielded the following result: The scrollbar does appear to have scrolled to the value but the panel's contents remain unmoved. Scrolling upwards shows an empty panel.
I'm trying to do this during startup. If I scroll directly to the control after a delay (from a thread), it works (though setting the scrollbar value doesn't).
Is there a better (synchronous) way of achieving what I'm looking for?
Use Shown event, for example:
private void Form1_Shown(object sender, EventArgs e)
{
this.panel1.ScrollControlIntoView(this.button1);
//Or if you need a special location:
//this.panel1.AutoScrollPosition = new Point(100, 100);
}

Dynamically adjusting the DropDownHeight of a custom ComboBox C#

I have a custom ComboBox with a TreeView inside of it (modified from code here), and am having issues with getting the DropDownHeight to correctly show everything. Not only can I not get the initial DropDownHeight right (tried setting to treeview.height), but I would also like it to resize when a tree is opened to show everything without a scrollbar. Is this possible? Let me know if you need any more information!
This bit of code in the link you provided should work:
private void ShowDropDown()
{
if (dropDown != null)
{
treeViewHost.Width = DropDownWidth;
treeViewHost.Height = DropDownHeight;
dropDown.Show(this, 0, this.Height);
}
}
ComboBox automatically resizes itself based on the content it is rendering.

How to disable CheckedListBox but enable scrolling winforms

I know that the question might seems to easy, but I can't find solution. I have CheckdListBox in my form. I have list of checkboxes inside. If I do that:clbxMyControl.Enabled = false; then I can't scroll to see all items. How to allow scrolling on disabled CheckedListBox?
Thanks!
Instead of disabling the control you should change it's SelectionMode like this:
checkedListBox1.SelectionMode = SelectionMode.None;
The user won't be able to select an item but will be allowed to scroll
You can prevent the user from checking items with the ItemCheck event:
bool listEnabled = true;
private void checkedListBox1_ItemCheck(object sender, ItemCheckEventArgs e) {
if (!listEnabled) e.NewValue = e.CurrentValue;
}
But do make sure that it is obvious that checking no longer works:
private void setListEnabled(bool enabled) {
listEnabled = enabled;
if (listEnabled) checkedListBox1.BackColor = Color.FromKnownColor(KnownColor.Window);
else checkedListBox1.BackColor = Color.FromKnownColor(KnownColor.Control);
}
The ListBox has only one handle in the Windows API which is set to enabled or disabled. Therefore there is no native way to enable the scrolling but the items.
You might be able to build your own control that has the requested behavior but you will have to paint it your self from scratch which might be a lot of work or you find a third party control that supports the behavior.
Or you can not use the enabled property but change the background/font color to make it look disabled and set:
checkedListBox1.SelectionMode = SelectionMode.None;
Another alternative might be the DataGridView. It is much more powerful, I'm not sure if it disables the scrollbar, too but if it does you are able to make the cells readonly and color them.
You can use this code to make CheckedListBox scrollable.
clbxMyControl.SelectionMode = SelectionMode.None;
Because Enable=false; make control unscrollable because this make the container of checkbox disabled.

c# .NET - Tabpage margin

I have a tabcontrol with 3 tabpages. I need to add a left margin to the first tabpage ( so move all tabpages move right of 200px ). How can I do it??
Using Visual Studio 2008 / c#
EDIT Reading again I think you're more looking for the controls on each page to be on the right of the tabs rather than moving the buttons.
As Hans suggests a panel would be the easiest way. But it's not pretty.
private void Form1_Load(object sender, EventArgs e)
{
// Create spacer tab with a name long enough to reach the 200px mark
TabPage spacer = new TabPage("..............................................................");
tabControl1.TabPages.Insert(0, spacer);
// Create a panel at the same location of the tab control.
Panel spacerBlock = new Panel();
spacerBlock.Name = "spacer";
spacerBlock.Location = tabControl1.Location;
spacerBlock.Width = 198;
spacerBlock.Height = 20;
this.Controls.Add(spacerBlock);
spacerBlock.BringToFront();
}
private void tabControl1_SelectedIndexChanged(object sender, EventArgs e)
{
// Ensure the user can't use the keyboard to somehow select the spacer tab.
if (tabControl1.SelectedIndex == 0)
tabControl1.SelectedIndex = 1;
// Check if the second (first I guess) tab is selected and adjust the panel to keep the look consistant.
if (tabControl1.SelectedIndex == 1)
this.Controls["spacer"].Width = 198;
else
this.Controls["spacer"].Width = 200;
}
You'll want to make sure the tab isn't selectable by the user via keyboard shortcuts thus the index change check.
Also note the panel will have to have its width adjusted if the second (first in your case) tab is selected due to the 3d GUI effect.
Honestly the hassle of taking into account the appearance settings of the end user to ensure the spacer tab's text and the panel width are correct length doesn't really make up for fancy look IMHO.
Only other option I could think of would be a tab panel with a 16px height. Again this would have to be adjusted depending on the end users appearance settings, not to mention the excess overhead in getting it all working.
If it's the AjaxControlToolkit tab control, add this CSS class:
.TabContainer .ajax__tab_header
{
padding-left: 200px;
}
you would need a work-around for that because tab pages can't be moved. You might wanna place a groupbox inside the tabpage and then you can add all the controls inside the groupbox as you desire...
// tabPage 1
this.tabPage1.Controls.Add(this.groupBox1);
// groupBox1
this.groupBox1.Location = new System.Drawing.Point(200,6);
this.groupBox1.Controls.Add(this.textBox1);
this.groupBox1.Controls.Add(this.AnyControls); //etc

Categories