Question

每当我调整主窗口大小时，我想在框架内创建页面以自动调整它的大小。首先，我在设计页面时只使用了堆栈面板，然后将它们放在网格的单元格内，但它没有用。

主窗口xmal：

<Window x:Class="WpfApplication3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication3"
    mc:Ignorable="d"
    Title="MainWindow" Height="600" Width="1200">
<Grid Name="gridUI">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="69*"/>
        <ColumnDefinition Width="207*"/>
        <ColumnDefinition Width="122*"/>
        <ColumnDefinition Width="85*"/>
        <ColumnDefinition Width="35*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.4*"/>
        <RowDefinition Height="0.4*"/>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>
    <Label Background="AliceBlue" FontSize="8" HorizontalAlignment="Left" Name="doc" Margin="0,0,0,26.333" Grid.RowSpan="2">Documents</Label>
    <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1" Margin="4.667,0.333,121.565,0.333" Grid.ColumnSpan="2">
        <Button Click="NewSample_Click">New Sample</Button>
        <Button Click="CreateReport_Click">Create Report</Button>
    </StackPanel>
    <Button Grid.Row="1" Grid.Column="4" Margin="0,0.333,-0.334,0.333">Settting</Button>
    <StackPanel Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Name="sp_doc" Margin="0,0.333,0.333,-0.333">
        <StackPanel Orientation="Horizontal" >
            <Button x:Name="sss" Click="sampleDropDown">s</Button>
            <Label FontSize="12" Name="sam">Samples</Label>

        </StackPanel>
        <StackPanel Orientation="Vertical" Name="sp_s">

        </StackPanel>
        <StackPanel Orientation="Horizontal" >
            <Button Click="reportDropDown">r</Button>
            <Label>Reports</Label>
        </StackPanel>
        <StackPanel Orientation="Vertical" Name="sp_r">

        </StackPanel>
    </StackPanel>
    <Frame x:Name="newSampleFrame" Grid.ColumnSpan="3" Content="" Grid.Column="1" HorizontalAlignment="center" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="center" Width="934" Height="456" NavigationUIVisibility="Hidden"/>
</Grid>

Page xmal：

<Page x:Class="WpfApplication3.Page1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:local="clr-namespace:WpfApplication3"
  mc:Ignorable="d" 
  d:DesignHeight="456" d:DesignWidth="934"
  Title="Page1">

<Grid>
    <Grid.RowDefinitions>

        <RowDefinition Height="auto" />
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!--<Border BorderBrush="Black" BorderThickness="0.5" Margin="5">-->

    <StackPanel Margin="60" Grid.Row="0" Grid.Column="0" >
        <StackPanel Orientation="horizontal" Margin="5">
            <Label Margin="0,0,100,0">Length</Label>
            <TextBox Width ="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,105,0">Width</Label>
          <TextBox Width="200"></TextBox>    
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,99,0">Weight</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,116,0">Age</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,71,0">Casting Date</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,73,0">Testing Date</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin="0,0,21,0">Concrete Temperature</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="5">
            <Label Margin ="0,0,91,0">Field No.</Label>
            <TextBox Width="200"></TextBox>
        </StackPanel>
        </StackPanel>
    <StackPanel  Height="30"   Width="120" Grid.Row="1" Grid.Column="1"  Orientation="Horizontal" Margin="5">
            <Button Width="50" Margin="0,0,10,0">Save</Button>
            <Button Width="50">Cancel</Button>
        </StackPanel>

    <!--</Border>-->
</Grid>

Answer 1

对于页面“WpfApplication3.Page1”，请删除

d：DesignHeight =“456”d：DesignWidth =“934”

并添加Height =“Auto”和Width =“Auto”。这将有效

Answer 2

你可以使用DockPanel作为外部contianer，并将LastChildFill设置为full。

<div ng-repeat="chart in stackedChartData">
    <stacked-chart chart-data="chart.list" x="date" y="value"
                  width="600" height="270"
                  margin="{top: 40, right:20, bottom:50, left:40}"></stacked-chart>
  </div>


    function StackedChartController($scope, $element, $attrs){
        this.x = $scope.x;
        this.y = $scope.y;
        this.xLabel = ($scope.xlabel || capitalize(this.x));
        this.yLabel = ($scope.ylabel || capitalize(this.y));
        this.height = $scope.height;
        this.width = $scope.width;
        this.margin = $scope.margin;
        this.data = $scope.chartData || [];
        this.xScale = null;
        this.yScale = null;
        this.svg = null;

        this.svg = d3.select($element[0])
            .append("svg")
            .attr("width", this.width)
            .attr("height", this.height)
            .append("g")
            .attr("transform",
                "translate(" + this.margin.left + "," + this.margin.top + ")");


        this.innerWidth = this.width - this.margin.left - this.margin.right;
        this.innerHeight = this.height - this.margin.top - this.margin.bottom;

        $scope.$watch("chartData", (function(newVal, oldVal) {
            this.data = newVal;

            this.xDomain = (typeof $scope.xdomain === 'function' ? $scope.xdomain : xDomainCommand);
            this.yDomain = (typeof $scope.ydomain === 'function' ? $scope.ydomain : yDomainCommand);
            // Redraw the graph after new data loads.
            this.drawAxes();
            this.append($scope.lines || [], this.data);
            this.plotData(this.data);
        }).bind(this));

        /* Debugging
         $scope.$watch("ydomain", (function(newVal, oldVal) {
         console.log('ydomain', newVal, oldVal);
         }).bind(this));
         */

        var x = this.x,
            y = this.y;

        var xDomainCommand = function(data, d3){
            data = data || [];
            return [d3.min(data, function(d) {
                return d[x];
            }), d3.max(data, function(d) {
                return d[x];
            })];
        };

        var yDomainCommand = function(data, d3){
            data = data || [];
            return [
                ((d3.min(data, function(d){
                    return d[y];
                }) - 1)),  (d3.max(data, function(d){
                    return d[y];
                }) + 1)
            ];
        }

        // Setting these methods to default functions.
        // But these will often be override by different scopes
        // which need to be able specify different different functions
        // for caclulating the data ranges.
        this.xDomain = xDomainCommand;
        this.yDomain = yDomainCommand;
    }


    /**
     * Plotting the data (an array of objects) passed to the function.
     * @param data
     */
    StackedChartController.prototype.plotData = function(data){
        data = data || [];
        var xScale = this.xScale.bind(this);
        var yScale = this.yScale.bind(this);
        var x = this.x;
        var y = this.y;
        var valueline = d3.svg.line()
            .x(function(d) {
                return xScale(d[x]);
            })
            .y(function(d) {
                return yScale(d[y]);
            });

        // Add the valueline path.
        this.svg.append("path")
            .attr("class", "line")
            .attr("d", valueline(data));

        // Add the points
        this.svg.selectAll("dot")
            .data(data)
            .enter().append("circle")
            .attr("r", 5)
            .attr("cx", function(d) {
                return xScale(d[x])
            })
            .attr("cy", function(d) {
                return yScale(d[y]);
            })
            // Tooltip
            .append("svg:title")
            .text((function(d){
                if (typeof this.tooltip === 'function'){
                    return this.tooltip(d)
                } else {
                    return null;
                }
            }).bind(this));
    };


    /**
     * Sets the size of the graph (range) and max/min values to plot (domain)
     */
    StackedChartController.prototype.setParams = function(){

        // Set the ranges
        this.xScale = d3.time.scale().range([0, this.innerWidth]);
        //xScale = d3.scale.linear().range([0, width]);
        this.yScale= d3.scale.linear().range([this.innerHeight, 0]);
        // Scale the range of the data
        this.xScale.domain(this.xDomain(this.data, d3));
        this.yScale.domain(this.yDomain(this.data, d3));

        // Define the axes
        var axisGenerators = {};
        axisGenerators.x = d3.svg.axis().scale(this.xScale)
            .orient("bottom").ticks(5);
        axisGenerators.y = d3.svg.axis().scale(this.yScale)
            .orient("left").ticks(5);
        return axisGenerators;
    };


    /**
     * Adds extra lines beyond the initial one created by the initial dataset.
     *
     */
    StackedChartController.prototype.append = function(lines, data){
        data = data || [];
        var xScale = this.xScale.bind(this);
        var yScale = this.yScale.bind(this);

        lines.forEach(function(item){
            var valueline = d3.svg.line()
                .x(function(d) {
                    return xScale(d[item.x]);
                })
                .y(function(d) {
                    return yScale(d[item.y]);
                });

            this.svg.append("path")
                .attr("class", "line")
                .style("stroke", item.color || 'black')
                .attr("d", valueline(this.data));

            if (item.showPoints === true) {
                this.svg.selectAll("dot")
                    .data(data)
                    .enter().append("circle")
                    .attr("r", 5)
                    .attr("cx", function (d) {
                        return xScale(d[item.x])
                    })
                    .attr("cy", function (d) {
                        return yScale(d[item.y]);
                    })
            }
        }, this);
    };


    /**
     * Clears the graph before redrawing the axes.
     */
    StackedChartController.prototype.drawAxes = function(){
        var svg = this.svg;

        // Remove original lines drawn on the axes.
        // PF (2016/03/04) This is interfering with multiple datasets.
        svg.selectAll('*').remove();

        var axisGenerators = this.setParams();


        // Add the X Axis
        svg.append("svg:g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + this.innerHeight + ")")
            .call(axisGenerators.x);
        // text label for the x axis

        // Add the Y Axis
        svg.append("svg:g")
            .attr("class", "y axis")
            .call(axisGenerators.y);
    };


    return {
        restrict: 'E',
        replace: true,
        scope: {
            x: '@',
            y: '@',
            height: '=',
            width: '=',
            margin: '=',
            chartData: '=',
            tooltip: '=',
            lines: '=',
            xdomain:'=',
            ydomain: '='
        },
        template: '<svg></svg>',
        controller: StackedChartController
    };
};

您可以使用要填充面板的控件替换Button。另外一个好处是你可以设置其他控件停靠在另一边

<DockPanel LastChildFill="True">

    <Button Content="LastChildFill=True"/>
</DockPanel>

我从这里得到了这些例子以及更多信息：http://www.wpftutorial.net/DockPanel.html

如何在wpf框架内制作可调整大小的页面？

2 个答案: