Program can't execute.
My XAML:
<ToolBar x:Name="toolBar1" DockPanel.Dock="Top" >
<Button x:Name="cut2" ToolTip="Cut" >
<Image Source="img/cut.png" Stretch="None" IsEnabledChanged="save2_IsEnabledChanged" />
</Button>
<Button x:Name="copy2" ToolTip="Copy" >
<Image Source="img/copy.png" Stretch="None" IsEnabledChanged="save2_IsEnabledChanged" />
</Button>
<Button x:Name="paste2" Command="ApplicationCommands.Paste" ToolTip="Paste" IsEnabledChanged="save2_IsEnabledChanged" >
<Image Source="img/paste.png" Stretch="None" />
</Button>
</ToolBar>
My cs:
private void save2_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
{
Button b = sender as Button;
b.Opacity = b.IsEnabled ? 1 : 0.5;
}
The problem in Opacity. It's just doesn't work.
I have a react component A, that contains more B components generated in A component based on server response using map function. Every B component has a calendar component that needs to show/hide. When calendar component shows it overlays the parent component.
If I put a B component raw, it works perfectly, so I don't think that css is wrong.
When I exam the rendered HTML, the appened calendar is at right place in DOM.
Whad did I wrong.
My A component:
class OffersDesktop extends OffersBase<WithStyles<typeof styles>>
{
render()
{
const css = this.props.classes;
const offers:BookingOffersResponse[] = this.state.offers;
const selectionPalens = offers.map
(
(offer: BookingOffersResponse, index: number) =>
{
return <SelectedPanel offer={offer} key={index + 1} />
}
);
const canContinue: boolean = this.store.state.selectedOffer.OfferID !== '';
const continueButon: JSX.Element = <BlueButton enable={!canContinue} text="Continue" onClick={this.continue}/>;
const Body = () =>
<StackPanel className={css.root} orientation="vertical" centerHorizontally centerVertically>
<Header />
<StackPanel className={css.container} orientation="vertical">
<StackPanel {...dockLeft}>
<HorizontalLinearStepper step={this.props.step} />
</StackPanel>
<StackPanel {...dockLeft} centerVertically className={css.titleContainer}>
<LocalOffer fontSize="large" className={css.icon} />
<span className={css.title}>Offers</span>
</StackPanel>
<StackPanel orientation="horizontal" centerHorizontally>
<StackPanel orientation="vertical" {...dockLeft}>
<StackPanel centerHorizontally centerVertically orientation="vertical">
<SelectedPanel offer={{} as any} key={0} />
<CircleLoader css={css.spinner}
sizeUnit={'px'}
size={100}
color={'#123abc'}
loading={this.state.isDataLoaded}
/>
</StackPanel>
{!this.state.isDataLoaded && selectionPalens}
<StackPanel centerHorizontally centerVertically>
<YearRoundPanel onClick={ this.yearRoundHandler } />
</StackPanel>
</StackPanel>
<StackPanel orientation="vertical" className={css.rightContainer}>
<StackPanel className={css.continueContainer} orientation="vertical" centerHorizontally centerVertically>
<StackPanel className={css.continueButton}>{continueButon}</StackPanel>
<Typography className={css.continueContainerText} variant="subtitle1">Book now with $25 deposit</Typography>
</StackPanel>
<SearchParameters searchParameters={this.state.appState.searchParameters}/>
</StackPanel>
</StackPanel>
</StackPanel>
<StackPanel className={css.footer} {...dockBottom} centerHorizontally><Footer /></StackPanel>
</StackPanel>
return Body();
}
B component
class SelectedPanel extends Connected<typeof React.Component, IProps & WithStyles<typeof styles>, IState, AppStore>(React.Component)
{
constructor(props: IProps & WithStyles<typeof styles>)
{
super(props);
this.state =
{
showCalendar: false,
appState: this.store.state
}
}
showCalnedarHandler = (event: React.MouseEvent<HTMLElement, MouseEvent>) : void =>
{
event.preventDefault();
this.setState
({
...this.state,
showCalendar: !this.state.showCalendar
})
}
render()
{
const css = this.props.classes;
const offer = this.props.offer;
const Body = () =>
<StackPanel className={css.root} centerHorizontally centerVertically orientation="vertical">
<StackPanel className={css.container} orientation="horizontal">
<StackPanel className={css.left} orientation="vertical">
<Typography className={css.typeText} variant="h6" gutterBottom>{this.state.appState.bookingTypeName} Dockage</Typography>
<Typography variant="h6" gutterBottom>
<span className={css.priceText}>$100.00</span><span className={css.priceTextExcluding}> per night excluding texes and add-ons</span>
</Typography>
<Typography className={css.offText} variant="h6">50% of (was $200)</Typography>
<StackPanel centerHorizontally centerVertically orientation="vertical" className={css.buttonContainer}>
<StackPanel {...dockTop} centerHorizontally centerVertically className={css.button} >Arrivals on 04/19/19 have a 3 night minimum stay</StackPanel>
<StackPanel {...dockBottom} centerHorizontally centerVertically className={css.button}>Space is aviable but the requestet shore power is not awiable</StackPanel>
</StackPanel>
<Typography onClick={event => this.showCalnedarHandler(event)} className={css.showCalendarText} variant="subtitle1">
Show pricing calendar
<KeyboardArrowDown className={css.selectionArrow}/>
</Typography>
</StackPanel>
<StackPanel className={css.right} orientation="vertical" centerHorizontally>
<StackPanel {...dockTop} centerHorizontally centerVertically className={css.whiteButton}>
<InformationButton text="Only 2 spaces left"/>
</StackPanel>
<StackPanel {...dockBottom} centerHorizontally centerVertically className={css.selectedButton}>
<SelectedButton text="Selected" />
</StackPanel>
</StackPanel>
</StackPanel>
{
this.state.showCalendar &&
<StackPanel className={css.calendarPanelContainer} {...dockBottom}>
<CalendarPanel searchParameters={this.state.appState.searchParameters}/>
</StackPanel>
}
</StackPanel>
return Body();
}
}
Calendar component
class CalendaPranel extends React.Component<IProps & WithStyles<typeof styles>, IState>
{
render()
{
const css = this.props.classes;
const Body = () =>
<StackPanel className={css.root} centerVertically orientation="vertical">
<StackPanel className={css.calendarContainer} centerHorizontally centerVertically>
<Calendar searchParameters={this.props.searchParameters}/>
</StackPanel>
<StackPanel className={css.legend} centerVertically orientation="horizontal">
<span className={css.unavailable}></span>Unavailable
<span className={css.available}></span>Available
<span className={css.selectedStartDay}></span>Selected Start Day
<span className={css.dateRange}></span>Date Range
</StackPanel>
<Typography className={css.legendText} variant="subtitle1">Above is the price for each night of dockage excluding taxes and add-ons</Typography>
</StackPanel>
return Body();
}
}
thnx
I want to create a checkbox which has three nested elements inside and each of these elements shall contain a list with checkboxes. My problem is that whenever the user clicks on one of the checkboxes, it doesn't get checked, but the menu gets closed.
Also, I can't figure out how to create a scrollbar inside one of the nested lists. At least not the proper way. My workaround was to wrap a Menu with the property maxHeight around the MenuItems, but I don't think that is the proper way. I tried nearly all props I can think of (menuListStyle, listStyle, nestedListStyle, ...), but nothing worked.
Here is my code with my last tries:
import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import Checkbox from 'material-ui/Checkbox';
import Menu from 'material-ui/Menu';
const UserPermissionButton = () => (
<IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
<MenuItem
primaryText="Permissions"
rightIcon={<ArrowDropRight />}
menuItems={[
<Checkbox label="Admin" />,
<Divider />,
<Checkbox label="Billing" />,
<Checkbox label="Marketplace" />,
<Checkbox label="Usercontrol" />,
]}
/>
<MenuItem
primaryText="Access Groups"
rightIcon={<ArrowDropRight />}
style={{maxHeight: 150, overflow: 'auto'}}
menuItems={[
<MenuItem key={1} primaryText="Child 1" />,
<MenuItem key={2} primaryText="Child 2" />,
<MenuItem key={3} primaryText="Child 3" />,
<MenuItem key={4} primaryText="Child 4" />,
<MenuItem key={5} primaryText="Child 5" />,
<MenuItem key={6} primaryText="Child 6" />,
<MenuItem key={7} primaryText="Child 7" />,
<MenuItem key={8} primaryText="Child 8" />,
]}
/>
<MenuItem
primaryText="Apps"
rightIcon={<ArrowDropRight />}
menuItems={[
<Menu maxHeight={200}>
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
</Menu>
]}
/>
</IconMenu>
);
export default UserPermissionButton;
UPDATE:
The code has changed to this:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import Checkbox from 'material-ui/Checkbox';
import Menu from 'material-ui/Menu';
class UserPermissionButton extends Component {
render() {
return(
<IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
<MenuItem
primaryText="Permissions"
rightIcon={<ArrowDropRight />}
menuItems={[
<Checkbox label="Admin" />,
<Divider />,
<Checkbox label="Billing" />,
<Checkbox label="Marketplace" />,
<Checkbox label="Usercontrol" />,
]}
/>
<MenuItem
primaryText="Access Groups"
rightIcon={<ArrowDropRight />}
style={{maxHeight: 150, overflow: 'auto'}}
menuItems={[
<MenuItem key={1} primaryText="Child 1" />,
<MenuItem key={2} primaryText="Child 2" />,
<MenuItem key={3} primaryText="Child 3" />,
<MenuItem key={4} primaryText="Child 4" />,
<MenuItem key={5} primaryText="Child 5" />,
<MenuItem key={6} primaryText="Child 6" />,
<MenuItem key={7} primaryText="Child 7" />,
<MenuItem key={8} primaryText="Child 8" />,
]}
/>
<MenuItem
primaryText="Apps"
rightIcon={<ArrowDropRight />}
menuItems={[
<Menu maxHeight={200}>
{this.props.products.products.map(
product => <Checkbox key={product.id} label={product.name} />
)}
</Menu>
]}
/>
</IconMenu>
);
}
}
function mapStateToProps({products}) {
return {products}
}
export default connect(mapStateToProps)(UserPermissionButton);
You can do this. Basically, using state, you have complete control over when to show the menuitems.
<MenuItem
onTouchTap={() => {
this.setState({ menuOpen: !this.state.menuOpen })
}}
primaryText="Permissions"
rightIcon={<ArrowDropRight />}
/>
{this.state.menuOpen ? (
<Menu maxHeight={200}>
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
<Checkbox label="App" />
</Menu>): null}
In other words, your component will now have state as follows:
const UserPermissionButton = React.createClass({
getInitialState() {
menuOpen: false
},
render () {
<div>
<IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
<MenuItem
primaryText="Permissions"
rightIcon={<ArrowDropRight />}
onTouchTap={() => {
this.setState({ menuOpen: !this.state.menuOpen })
}}
/>
</IconMenu>
{this.state.openMenu ? (
<div>
<Checkbox label="Admin" />,
<Divider />,
<Checkbox label="Billing" />,
<Checkbox label="Marketplace" />,
<Checkbox label="Usercontrol" />,
</div>
): null}
</div>
}
});
i am working on wpf window that show list of items next each other with wrapping, i have tried to use WrapPanel in this way:
<Grid>
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<Button Content="01" Height="30" Width="70"/>
<Button Content="02" Height="35" Width="72"/>
<Button Content="03" Height="20" Width="74"/>
<Button Content="04" Height="25" Width="76"/>
<Button Content="05" Height="18" Width="78"/>
<Button Content="06" Height="50" Width="70"/>
<Button Content="07" Height="40" Width="72"/>
<Button Content="08" Height="55" Width="74"/>
<Button Content="09" Height="45" Width="76"/>
<Button Content="10" Height="25" Width="78"/>
<Button Content="11" Height="20" Width="80"/>
<Button Content="12" Height="30" Width="70"/>
<Button Content="13" Height="45" Width="72"/>
<Button Content="14" Height="30" Width="74"/>
<Button Content="15" Height="20" Width="76"/>
<Button Content="16" Height="25" Width="78"/>
<Button Content="17" Height="35" Width="80"/>
<Button Content="18" Height="50" Width="70"/>
<Button Content="19" Height="55" Width="72"/>
<Button Content="20" Height="45" Width="74"/>
<Button Content="21" Height="20" Width="76"/>
<Button Content="22" Height="60" Width="78"/>
<Button Content="23" Height="20" Width="80"/>
<Button Content="24" Height="25" Width="70"/>
<Button Content="25" Height="30" Width="72"/>
</ItemsControl.Items>
</ItemsControl>
</Grid>
and this is the result:
Actually this result is unsatisfactory for me because if you imagine the WrapPanel as grid(rows and columns) you will find that there is no columns, but there are fixed size rows. i need to make WarpPanel or some control else without columns too, look at this imaginary image:
notice that there is no rows and no columns. this is what i wanna make.
anybody have ideas to solve this issue?
You could write your own custom Panel class. There are some tutorials on the web, simply google "wpf custom panel".
It boils down to overriding the MeasureOverride and ArrangeOverride methods.
public class CustomPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
Size panelDesiredSize = new Size();
foreach (UIElement child in InternalChildren)
{
child.Measure(availableSize);
// Use child.DesiredSize, availableSize.Width and the positions
// and sizes of the previous children to calculate the position of
// the current child. Then determine the resulting Panel height.
panelDesiredSize = ...
}
return panelDesiredSize;
}
protected override Size ArrangeOverride(Size finalSize)
{
foreach (UIElement child in InternalChildren)
{
// Arrange each child according to the position calculations
// done in MeasureOverride
Point position = ...
child.Arrange(new Rect(position, child.DesiredSize));
}
return finalSize;
}
}
UPDATE: The following simple custom Panel might more or less do what you want.
public class PackPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
foreach (UIElement child in InternalChildren)
{
child.Measure(availableSize);
}
var positions = new Point[InternalChildren.Count];
var desiredHeight = ArrangeChildren(positions, availableSize.Width);
return new Size(availableSize.Width, desiredHeight);
}
protected override Size ArrangeOverride(Size finalSize)
{
var positions = new Point[InternalChildren.Count];
ArrangeChildren(positions, finalSize.Width);
for (int i = 0; i < InternalChildren.Count; i++)
{
var child = InternalChildren[i];
child.Arrange(new Rect(positions[i], child.DesiredSize));
}
return finalSize;
}
private double ArrangeChildren(Point[] positions, double availableWidth)
{
var lastRowStartIndex = -1;
var lastRowEndIndex = 0;
var currentWidth = 0d;
var desiredHeight = 0d;
for (int childIndex = 0; childIndex < InternalChildren.Count; childIndex++)
{
var child = InternalChildren[childIndex];
var x = 0d;
var y = 0d;
if (currentWidth == 0d || currentWidth + child.DesiredSize.Width <= availableWidth)
{
x = currentWidth;
currentWidth += child.DesiredSize.Width;
}
else
{
currentWidth = child.DesiredSize.Width;
lastRowStartIndex = lastRowEndIndex;
lastRowEndIndex = childIndex;
}
if (lastRowStartIndex >= 0)
{
int i = lastRowStartIndex;
while (i < lastRowEndIndex - 1 && positions[i + 1].X < x)
{
i++;
}
while (i < lastRowEndIndex && positions[i].X < x + child.DesiredSize.Width)
{
y = Math.Max(y, positions[i].Y + InternalChildren[i].DesiredSize.Height);
i++;
}
}
positions[childIndex] = new Point(x, y);
desiredHeight = Math.Max(desiredHeight, y + child.DesiredSize.Height);
}
return desiredHeight;
}
}
You Can Either use Canvas:
Or Use Grid and set the Margin of each Buttons according to requirenment
<Canvas >
<Button Content="s" Width="50" Canvas.Left="17" Canvas.Top="20" />
<Button Canvas.Left="73" Canvas.Top="32" Content="s" Width="60" Height="42" />
<Button Canvas.Left="139" Canvas.Top="10" Content="s" Height="42" Width="60" />
</Canvas>
<Grid >
<Button Content="01" Height="30" Width="70" Margin="20,12,414,268" />
<Button Content="02" Height="35" Width="72" Margin="426,148,6,128" />
<Button Content="03" Height="20" Width="74" Margin="190,122,240,170" />
<Button Content="04" Height="25" Width="76" Margin="386,26,40,260" />
<Button Content="05" Height="18" Width="78" Margin="376,202,48,92" />
<Button Content="06" Height="50" Width="70" Margin="385,64,48,196" />
<Button Content="07" Height="40" Width="72" Margin="162,202,269,68" />
<Button Content="08" Height="55" Width="74" Margin="20,154,408,102" />
<Button Content="09" Height="45" Width="76" Margin="21,95,406,171" />
<Button Content="10" Height="25" Width="78" Margin="44,47,382,239" />
<Button Content="11" Height="20" Width="80" Margin="386,120,38,170" />
<Button Content="12" Height="30" Width="70" Margin="95,13,338,268" />
<Button Content="13" Height="45" Width="72" Margin="290,6,140,260" />
<Button Content="14" Height="30" Width="74" Margin="210,38,220,244" />
<Button Content="15" Height="20" Width="76" Margin="128,48,299,242" />
<Button Content="16" Height="25" Width="78" Margin="265,189,160,97" />
<Button Content="17" Height="35" Width="80" Margin="176,154,246,122" />
<Button Content="18" Height="50" Width="70" Margin="100,146,333,116" />
<Button Content="19" Height="55" Width="72" Margin="270,121,160,135" />
<Button Content="20" Height="45" Width="74" Margin="348,148,81,118" />
<Button Content="21" Height="20" Width="76" Margin="94,78,332,212" />
<Button Content="22" Height="60" Width="78" Margin="270,60,155,192" />
<Button Content="23" Height="20" Width="80" Margin="176,74,247,216" />
<Button Content="24" Height="25" Width="70" Margin="194,95,238,191" />
<Button Content="25" Height="30" Width="72" Margin="117,104,314,177" />
</Grid>
I'm creating a Toolbar with some buttons, and I want each button to execute an different command according to the ViewModel attached to it's DataContext, so I created if like this:
public readonly DependencyProperty NewCommandProperty = DependencyProperty.Register(
"NewCommand", typeof(ICommand),
typeof(VirtueGridToolbar));
public ICommand NewCommand
{
get
{
return (ICommand)GetValue(NewCommandProperty);
}
set
{
SetValue(NewCommandProperty, value);
}
}
public GridToolbar()
{
InitializeComponent();
}
and the xaml of the control is this:
<UserControl x:Class="Virtue.Modules.Library.Controls.GridToolbar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ToolBar Background="Transparent">
<ToolBar.Items>
<Button x:Name="NewButton"
Width="25"
Height="25"
ToolTip="Novo"
Command="{Binding NewCommand}">
<Image Source="{DynamicResource NewLarge}" />
</Button>
<Button x:Name="EditButton"
Width="25"
Height="25"
ToolTip="Editar">
<Image Source="{DynamicResource EditLarge}" />
</Button>
<Button x:Name="DeleteButton"
Width="25"
Height="25"
ToolTip="Excluir">
<Image Source="{DynamicResource DeleteLarge}" />
</Button>
<Separator />
<Button x:Name="SaveButton"
Width="25"
Height="25"
ToolTip="Excluir">
<Image Source="{DynamicResource SaveLarge}" />
</Button>
</ToolBar.Items>
</ToolBar>
</UserControl>
But when I add the UserControl to another control and attribute the Command
<V:GridToolbar NewCommand="{Binding Path=New}" />
the command does not execute.
Any suggestions?
Tks,
Diego